WP-PageNavi, from Lester “GaMerZ” Chan, 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!
6 Comments
Thank you. I hadn’t heard of this plugin. I also experienced something of an epiphany when you wrote, “Now your styles are protected against any upgrades to the plugin….”
Now, why didn’t I think of that before.
I hope that isn’t because you’ve done things the hard way. Or even worse, the pull my hair out because everything is broken and there goes the weekend way.
… I would of had that moment last week, thanks to Subversion, if it wasn’t for the Mac Time Machine. Love that thing. No Morlocks involved or anything.
Anyway, WP-PageNavi. Yeah, it’s awesome. I’m going to start using it here when I switch to using Thematic. Which is, not incidentally, all about protecting your site against any upgrades.
Thanks Ian. These are the the missing instructions in Lester Chan’s documentation.
Glad to be useful, Erin.
Hi, I have been searching for this plugin for a long time….
Thanks for sharing this one….
You can check this working on my blog: http://www.naseerahmad.com/
I actually said ‘ooh that’s a bit clever’ out loud in my office. Oh dear.