Add Google-Style Page Navigation to your Category and Search Pages

milopage1

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>&laquo;</strong>';
 } if(empty($nxtlabel)) {
 $nxtlabel = '<strong>&raquo;</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().'">&laquo; 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 &raquo;</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('&laquo; Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></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?

milo 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!

Share

  1. 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! :D

      (@Matt – Shuuuush, don’t say that too loud! People might start catching on getting suspicious :o )

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

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

  4. Yes that’s a great piece of code. Nice to see the usability aspect in it. Thanks for sharing!

  5. Dave (16 comments)27 April 09

    Thanx for sharing the code. We can make a new plugin according to our needs. :)

  6. Cool, I didn’t know that you can do that. defenty going to use it a my bigger blog site .
    Thanks for the code.

  7. detruk (1 comments)10 June 09

    Thanks man,very useful !

    detruk’s Latest Post: dotMobi WordPress Mobile Pack : Wordpress pour mobiles

  8. 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ı =-.

  9. Blog go blog (1 comments)22 July 09

    Code that is extraordinary, really help me .. thank you

  10. Tiffany (2 comments)25 July 09

    Thanks so much! This is exactly what I needed. You’re amazing. :)
    .-= Tiffany´s last blog ..Layout =-.

  11. 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!

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

  13. n-blue (2 comments)16 September 09

    I forget to provide my site, here it is: http://www.15thmove.net

  14. Steve (12 comments)6 November 09

    Brilliant! Many thanks…..

Leave a Comment

Your reply will be added to the comment above (Below any other replies to this comment) -

(We DoFollow)

Not sure how to get an image with your comment?