Styling WP-PageNavi Pagination in Divi

Written by Dan Mossop

It is easy to add pagination to blog pages in the Divi theme simply by installing the free WP-PageNavi plugin, as outlined in this post by Elegant Themes.

I just wanted to share an example of styling the pagination, in case it helps anyone.

Here is how the pagination appears when the plugin is installed on Divi:

Now let's apply the following CSS, which makes several changes (as detailed in the code comments):
/* === Style WP-PageNavi Pagination === */

/* Center the pagination */
.wp-pagenavi { text-align:center; }

/* Add a border */
.wp-pagenavi span, .wp-pagenavi a, .wp-pagenavi :last-child { 
    border: 1px solid #bbb !important; 
    padding: 6px 12px; 
    margin: 0;  
}
.wp-pagenavi span, .wp-pagenavi a { border-right: none !important; }

/* Style the default text */
.wp-pagenavi span, .wp-pagenavi a { 
    font-weight: bold !important; 
    color: #999 !important
}

/* Style the current / hovered page link */
.wp-pagenavi span.current,
.wp-pagenavi a:hover { 
    color: #666 !important; 
    background-color: #ddd !important; 
}

/* Style the page count text */
.wp-pagenavi :first-child { color: #666 !important; }

/* Add text to the "next" link */
.wp-pagenavi .nextpostslink:before { content: 'Next '; }
.wp-pagenavi .previouspostslink:after { content: ' Prev'; }
This gives the following result:

Hopefully that gives you a bit of a head-start in styling your own Divi pagination.

A couple of notes:

  • I suggest disabling the "Use pagenavi-css.css" option in the WP-PageNavi settings as it seems to be unnecessary (Divi seems to apply the default pagenavi styles for you)
  • While I've done it via CSS, you can also configure the "Next" / "Prev" text from the WP-PageNavi settings. I've used CSS mainly to illustrate that it can be done this way.
  • I haven't yet included this in Divi Booster, but if you'd like to see me do so, please let me know in the comments.

Check out Divi Booster

Enhance your Divi site with Divi Booster, which offers hundreds of new features to customize and improve your site effortlessly, including options that might help with styling and improving pagination as shown in the WP-PageNavi example.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

12 Comments

  1. Hello, Is there a way to add spacing between the "Previous" and "Next" Page Links.
    I want the Previous Link to be shown left and the Next Page Link to be shown right.

    Reply
    • Hey gabriel, is there any chance you're able to send through a link to an example page, so that I can make sure I give you the right advice for your setup? Thanks!

      Reply
  2. Hi !

    I have a filterable portfolio halfway a page with pagination turned on.
    When i use pagination it takes me to the top of the page; not showing the portfolio…

    Any idea?

    Regards Tim

    Reply
    • Hey Tim, my guess would be that there's a JavaScript error on the page which is preventing the code to handle the same-page pagination from running. As such, the pagination links would revert to the default link behavior of linking to the current page. You may be able to track down the source of the error by looking in your browser's JavaScript console. If you're able to share a link to the page you're working on I'll be happy to take a look. Cheers!

      Reply
  3. I got divi and is great

    Reply
  4. Thanks so much for sharing this! :-)

    Reply
  5. Wow, that worked perfectly, thanks!

    Reply
  6. Hi Dan,

    Great its working well :-) https://www.trafficprisma.de/magazin/page/10/ but a question: there is a small line over the pagination, howcan we delete this line? and how can we reduce the space down to the orange stripe under the pagination? can we solve this also with a css-snippet?!

    Best Regards
    Tobias

    Reply
    • Hey Tobias, I'm glad that worked. You should be able to remove the line above the pagination and reduce the space below it with this CSS:

      .wp-pagenavi { border-top: 0px; margin-bottom: 0px; }
      
      Reply
  7. Thanks for the code and idea to style the pagination! But where should i copy the code? In Divi "Theme Options" Custom-CSS Field? Or should i create a new css file?! Thanks for any suggestions!

    Regards
    Tobias

    Reply
    • Hey Tobias, yes you can add it in the Divi "Theme Options" Custom-CSS Field. That's probably the easiest option. If you are using a child theme, you could alternatively add it to the end of its style.css file.

      Reply
  8. I have to try this! Great work!

    Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.