Add Google-Style Page Navigation to your Category and Search Pages
30It 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!
Enjoy this post? You should follow me on Twitter!
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.
It’s almost as if he’s watching you through the little webcam on your monitor… :)
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! :D
(@Matt – Shuuuush, don’t say that too loud! People might start
catching ongetting suspicious :o )This is typically known as “paging”, as opposed to “google-style”.
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.
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.
Yes that’s a great piece of code. Nice to see the usability aspect in it. Thanks for sharing!
Thanx for sharing the code. We can make a new plugin according to our needs. :)
Cool, I didn’t know that you can do that. defenty going to use it a my bigger blog site .
Thanks for the code.
Thanks man,very useful !
detruk’s Latest Post: dotMobi WordPress Mobile Pack : WordPress pour mobiles
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ı =-.
Code that is extraordinary, really help me .. thank you
Thanks so much! This is exactly what I needed. You’re amazing. :)
.-= Tiffany´s last blog ..Layout =-.
Veeeeery good!!! Thanks a lot for this useful code :-) I had a few problems but know it works exactly as i need it!
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.
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.
I forget to provide my site, here it is: http://www.15thmove.net
Brilliant! Many thanks…..
can’t find navigation function in category.php
Easily, the post is really the sweetest on this worthwhile topic. I fit in with your conclusions and will eagerly look forward to your approaching updates. Saying
thanks will not just be sufficient, for the exceptional clarity in your writing. I will immediately grab your rss feed to stay privy of any updates.
Wow – these are absolutely fantastic. We love Creative Commons and thank you for putting post.
I will be happy to announce more examples if I were you. It is running good so far. Just keep improving the features.
I appreciate the work that your are doing!!
This is absolutely cook! I’m glad to know it. Thank You:-)
I really like this, but am wondering how to modify the code to show **all** the pages and without the ‘first’ and ‘last’ links, given that I don’t have on the sites in question hundreds of category or search results, at most I can get them in the tens.
I got to behave that way by deleting the echo lines for the ‘first’ and ‘last’ and replacing the number 3 in the navigation code with the number 40, so now I can get, say, full 13 pages of search results to display without either the end or the beginning pages disappearing if I click the pages at the other end.
But I’m hoping someone would show a more elegant way of doing it. BTW, google doesn’t include ‘first’ and ‘last’, I suppose you have to click back more than once to go all the way to the first page if you went farther afield than the first 18-20 pages.
Thanks!
Great hack to add page navigation. I saw few already made plugins with similar functionality but this one is cool.
Fantastic mod, works great! I did find that it was not functioning for tag searches. The tag queries were only showing the first page of results with no navigation at all. I fixed it by changing the code:
if(!is_category())
to:
if(!is_category() && !is_tag())
And now all is well.
THANKS!
The navigation must be simple and easy to use. The access is very important too. I think the implementation must be difficult if you are not a very good web developer.
You have great ideas. I use your navigation system in my blog.Thanks and Keep up the good work
Top of the line post , I am trying to learn how to make my weblog this good looking !