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. 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!
18 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.
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.
i want to paginate my theme in a digg like way, i have several premium thems i am willing to share theme if some one tells me how to paginate my them.
leave me a comment on my site: http://emediagallery.com
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.
This is a fantastic post, it is exactly what I searched every where for, thanks alot
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.
Thank you for this wonderful tip! I just wish I’ve read this article before I edited the CSS in the plugin folder! hahaha. Thanks!
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.
Would this work with any plug in?
I am trying to incorporate WP-Print into my theme and set print options as in this sample
http://simplyrecipes.com/recipes/spicy_citrusy_black_beans/
Know just a little php to be dangerous not enough to be useful.
Your help is appreciated.
Thanks
Hi,
Does it work for pages or it works with post only? I tried using it with page, it didn’t work. Can you please tell me on what basis it inserts a page break in a page? I m very confused. I want to use it on page: http://delhi-masterplan.com/news-articles/ only. Can you please help? Tks
Thanks for this post.
I’ve been looking for a way to do this for a while. Glad to finally find a solution!
Great Article, simple and efficient way to implement this plug-in. I will most likely be putting it on my website as well: http://www.dlocc.com
Bookmarked your site… great WordPress stuff on here.
Not sure if this pagination design is usable. Buttons (especially next and previous pages) should be bigger.
/* POV of blog reader */
4 Trackbacks
[...] How To Build WP-PageNavi Into Your WordPress Theme 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. (tags: wordpress tutorials) [...]
[...] How To Build WP-PageNavi Into Your WordPress Theme [...]
[...] 本文翻译自：ThemeShaper.com [...]
[...] 本文翻译自：ThemeShaper.com [...]