How To Build WP-PageNavi Into Your WordPress Theme

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:

Wp-PageNavi Sample

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. To edit the styles of the Page Navi plugin simply copy pagenavi-css.css into your theme directory folder and make your changes there. That way you won’t lose any changes when you upgrade the plugin.

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

23 thoughts on “How To Build WP-PageNavi Into Your WordPress Theme”

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

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

  3. Thanks Ian. These are the the missing instructions in Lester Chan’s documentation.

  6. I actually said ‘ooh that’s a bit clever’ out loud in my office. Oh dear.

    🙂 Thank you for this fantastic tutorial.

  7. How do you change the number of posts to consider before paging starts. It looks like the default is 10 and I wanted to move that to a higher number. Any idea where to change that magic number. I’ve looked into the source code and couldn’t find the appropriate place to make that change.

  9. This thing creates a mess in IE because of the way IE abuses padding. The boxes are waaaaaaaaay to wide.

    If anyone has figured out a solution, please post it.

  11. Pingback: links for 2009-02-23 « jasonmcdermott.net

  12. Thanks for filling in the gaps on this, Ian. To fix the extra wide spacing in IE, you need to edit wp-pagenavi.php and remove the non-cross-browser-compliant “ ” references (the html character entity for thin space) from lines 113 to 138. Wasn’t able to override it with CSS so sadly, yes, you will have to do this each time you upgrade the plugin.

  14. Where should i put these codes? the usage doc, says put in the footer. but that would be silly since it would appear everywhere in the blog and not just in the single posts.

  15. Pingback: Daily Digest for May 22nd | Digital Gilbert
  17. Pingback: 如何为你的WordPress主题创建页面导航？ / 言 午 一 郎
  19. Pingback: 如何为你的WordPress主题创建页面导航？ | 言午一郎

  22. Not sure if this pagination design is usable. Buttons (especially next and previous pages) should be bigger.

    /* POV of blog reader */

  23. Pingback: How to build WP Pagenavi into your Wordpress theme | CODY1

Comments are closed.