WP PageNavi Style Customization

WP-PageNavi has been a staple for adding or changing your pagination. The problem is that it looks pretty dated by today’s standards even though the plugin itself has been kept up to date.

Here’s one way to customize your WP PageNavi CSS to match your theme. Check this out and see if it works for you. Simply add this to your child theme or directly in your theme’s custom CSS area.

/* Center the pagination, add spacing, and clear it */
.wp-pagenavi { 
    text-align: center;
    border: 0;
    padding-top: 60px;
    margin-bottom: 0;
    clear: both;
}
/* Add a border */
.wp-pagenavi span, .wp-pagenavi a, .wp-pagenavi :last-child { 
    padding: 6px 12px; 
    margin: 0;
    border: 2px solid #e9eff5 !important;
}
.wp-pagenavi span, .wp-pagenavi a { border-right: none !important; }
/* Style the numbers */
.wp-pagenavi span, .wp-pagenavi a { 
    font-weight: bold !important; 
    color: #000 !important;
    font-size: 22px !important;
    line-height: 2em !important;
}
/* Style the current and hovered page link */
.wp-pagenavi span.current,
.wp-pagenavi a:hover { 
    color: #000 !important; 
    background-color: #e9eff5 !important; 
}
/* Style the page count text */
.wp-pagenavi :first-child { color: #666 !important; }
/* Add before and after text to link arrows */
.wp-pagenavi .nextpostslink:before { content: 'Next '; }
.wp-pagenavi .previouspostslink:after { content: ' Prev'; }

Don’t like it or want to change the colors? No problem, the code has been commented so feel free to customize it to match your desire.