Nulla imperdiet augue scelerisque libero

WP-PageNavi, from Lester “GaMerZ” Chan on Centutz.com, gives you an awesome upgrade to your WordPress post-page navigation. Instead of the typical “Older Post/Newer Post” links, you get “Digg-like” pagination. Like so:

Very cool. But what if you want to incorporate it into a WordPress theme for release? How do you style it when the instructions tell you to modify the plugin files? Good questions. I’ll tell you how.

First of all you want to tell WordPress to use the plugin if it’s installed and if it’s not installed to use the traditional navigation.

<?php if(function_exists('wp_pagenavi')) { // if PageNavi is activated ?>

<?php wp_pagenavi(); // Use PageNavi ?>

<?php } else { // Otherwise, use traditional Navigation ?>

<div class="nav-previous">
<!-- next_post_link -->
</div>

<div class="nav-next">
<!-- previous_post_link -->
</div>

<?php } // End if-else statement ?>

Good. Now for the styling. What you want to do is style the navigation to fit into the look of your theme. So what we’ll need to do is perform a bit of a reset on the plugin styles in our themes style.css file. I’ll give you an example.

/* =PageNavi
-------------------------------------------------------------- */

/* Use !important to override PageNavi CSS */

.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:active {
color: blue !important;
background:transparent !important;
}
.wp-pagenavi a:hover {
}
.wp-pagenavi span.pages {
background:transparent !important;
}
.wp-pagenavi span.current {
background:transparent !important;
}
.wp-pagenavi span.extend {
background:transparent !important;
}

Now your styles are protected against any upgrades to the plugin and you’re ready to make it fit the look of your theme.

You can look for this technique in my future themes. Good luck trying it out in yours!