
It can be very tedious to navigate through a category on a WordPress blog. Your navigation options tend to be limited to “Next Page”/”Previous Page".
Not the most efficient method in the world…
When you do a search on Google, you can skip to page 3, 4, 5 or anything else. And once you do, you can always click back to page 1. It makes flicking through a large number of results much, much easier.
So, why don’t we recreate that in WordPress? Milo is going to show us how.
Copy and Paste
This bit is easy. Just copy and paste the following block of code into your theme’s functions.php file (Create a blank file with that name if your theme doesn’t have one).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <?php function wp_pagenavi($before = '', $after = '', $prelabel = '', $nxtlabel = '', $pages_to_show = 5, $always_show = false) { global $request, $posts_per_page, $wpdb, $paged; if(empty($prelabel)) { $prelabel = '<strong>«</strong>'; } if(empty($nxtlabel)) { $nxtlabel = '<strong>»</strong>'; } $half_pages_to_show = round($pages_to_show/2); if (!is_single()) { if(!is_category()) { preg_match('#FROM\s(.*)\sORDER BY#siU', $request, $matches); } else { preg_match('#FROM\s(.*)\sGROUP BY#siU', $request, $matches); } $fromwhere = $matches[1]; $numposts = $wpdb->get_var("SELECT COUNT(DISTINCT ID) FROM $fromwhere"); $max_page = ceil($numposts /$posts_per_page); if(empty($paged)) { $paged = 1; } if($max_page > 1 || $always_show) { echo "$before <div class='Nav'><span>Pages ($max_page): </span>"; if ($paged >= ($pages_to_show-1)) { echo '<a href="'.get_pagenum_link().'">« First</a> ... '; } previous_posts_link($prelabel); for($i = $paged - $half_pages_to_show; $i <= $paged + $half_pages_to_show; $i++) { if ($i >= 1 && $i <= $max_page) { if($i == $paged) { echo "<strong class='on'>$i</strong>"; } else { echo ' <a href="'.get_pagenum_link($i).'">'.$i.'</a> '; } } } next_posts_link($nxtlabel, $max_page); if (($paged+$half_pages_to_show) < ($max_page)) { echo ' ... <a href="'.get_pagenum_link($max_page).'">Last »</a>'; } echo "</div> $after"; } } } ?> |
Adding To Your Theme
You now need to choose where to put the new navigation in your theme.
Search in category.php for a line like this:
1 2 3 4 | <div class="navigation"> <div class="alignleft"><?php next_posts_link('« Older Entries') ?></div> <div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div> </div> |
Now replace this with:
1 2 | <div class="navigation"> <?php if(function_exists('wp_pagenavi')) { wp_pagenavi('', '', '', '', 3, false);} ?> </div> |
You can do the same in index.php for your home page, but there is an extra step. Look in the file for:
1 | <?php while (have_posts()) : the_post(); ?> |
Replace this with the following, and then add the navigation code from above wherever you like.
1 2 | <?php $temp = $wp_query; $wp_query= null; $wp_query = new WP_Query(); $wp_query->query('showposts=6'.'&paged='.$paged); ?> <?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?> |
As well as working on your category and home pages, this code will also work for search results pages so feel free to use it there too!
What do you think, is numbering the pages better than the standard “Older Entries” approach? Will you be using it on your blog?
WordPress Hacks Series: The code in these posts was written entirely by Milo, a web designer from Oxford, Britain. Check out her website for free WordPress themes and her blog, or follow her on Twitter!
Custom Search
Steven Bradley (7 comments)19 March 09
Michael you never cease to amaze me. You have this uncanny ability to know exactly what I’m working on and offer some code to get me started at exactly the right moment.
Thanks. I was just looking for some ideas on adding pagination to a theme and here you are giving me what I need.
redwall_hp (139 comments)19 March 09
It’s almost as if he’s watching you through the little webcam on your monitor…
Michael Martin (1319 comments)19 March 09
Thanks Steven, but I’m afraid all the credit for the idea and the coding has to go to milo! She has written all of the codes in this WordPress Hacks series. All I’ve been doing is writing up the posts around her awesome scripts. They’ve amazed me too!
(@Matt – Shuuuush, don’t say that too loud! People might start
)
catching ongetting suspiciousAdam (18 comments)19 March 09
This is typically known as “paging”, as opposed to “google-style”.
Michael Martin (1319 comments)19 March 09
The old way is still paging really, the content is being split up to cover separate pages. It’s even numbered, in the URLs at least.
You’re right, I could probably have found a better way to describe this but when I thought about it, Google’s little navbar was the first thing I thought of. We use it all the time, so it seemed to work.
I should have included it in the welcome image now that I think about it though, to make the link a little clearer.
Web Design Beach (31 comments)23 March 09
Great hack to add page navigation. I saw few already made plugins with similar functionality but as this one is hand made it gives you a space for customization. And i think it’s much better to have this kind of page navigation then the default one.
Thomas | Santhos Webdesign (2 comments)25 March 09
Yes that’s a great piece of code. Nice to see the usability aspect in it. Thanks for sharing!
Dave (16 comments)27 April 09
Thanx for sharing the code. We can make a new plugin according to our needs.
delta squadron (1 comments)28 April 09
Cool, I didn’t know that you can do that. defenty going to use it a my bigger blog site .
Thanks for the code.
detruk (1 comments)10 June 09
Thanks man,very useful !
detruk’s Latest Post: dotMobi WordPress Mobile Pack : Wordpress pour mobiles
tasarhane (5 comments)21 June 09
hey this is pretty.. without plugin..
thanks a lot..!
.-= tasarhane´s last blog ..tasarhane wrote a new blog post: 2009 Açıköğretim Final Sınav Sonuçları =-.
Blog go blog (1 comments)22 July 09
Code that is extraordinary, really help me .. thank you
Tiffany (2 comments)25 July 09
Thanks so much! This is exactly what I needed. You’re amazing.
.-= Tiffany´s last blog ..Layout =-.
Freakplanet (1 comments)7 August 09
Veeeeery good!!! Thanks a lot for this useful code
I had a few problems but know it works exactly as i need it!
n-blue (2 comments)16 September 09
Thanks for great hack, definitifly usefull.
I used this hack for my site:
I found it limited to 5 pages for navigation in the function ($pages_to_show = 5)
How can I set it to unlimted? any idea? and what’s con of doing that since I want my user able to navigate to the first post.
Steve B (1 comments)24 October 09
I think if you put ($pages_to_show = -1) That will do the trick.
Mike and Milo, Thank you so much for the info. Just what I was looking for.
Like both your sites as well.
Thanks agian
Steve B.
n-blue (2 comments)16 September 09
I forget to provide my site, here it is: http://www.15thmove.net
Steve (12 comments)6 November 09
Brilliant! Many thanks…..