Styling WP-PageNavi Pagination in Divi

It is easy to add pagination to the Divi blog pages 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.

This post may contain referral links which may earn a commission for this site

Hundreds of new features for Divi
in one easy-to-use plugin


  1. 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

    • 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!

  2. I got divi and is great

  3. Thanks so much for sharing this! :-)

  4. Wow, that worked perfectly, thanks!

  5. Hi Dan,

    Great its working well :-) 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

    • 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; }
  6. 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!


    • 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.

  7. I have to try this! Great work!


Submit a Comment

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