Styling WP-PageNavi Pagination in Divi

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

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.

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

7 Comments

  1. Thanks so much for sharing this! 🙂

    Reply
  2. Wow, that worked perfectly, thanks!

    Reply
  3. 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
  4. 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
  5. I have to try this! Great work!

    Reply

Submit a Comment

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