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!

Enjoy this post? You should follow me on Twitter!