Create Google-Style Page Navigation for wordpress

March 26, 2009 · Print This Article

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 by ourself?

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

<?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> ... '; }
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";

You now need to choose where to put the new navigation in your theme.

Search in category.php for a line like this:

<div class="navigation">
<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>

Now replace this with:

<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:

<?php while (have_posts()) : the_post(); ?>

Replace this with the following, and then add the navigation code from above wherever you like.

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

Your choice for site templates and wordpress themes


One Response to “Create Google-Style Page Navigation for wordpress”

  1. miikey on June 13th, 2009 2:21 am


    A hugeeeee thank you. This post has literally saved my website. I wasn’t interested in functions, instead the PHP for category and index.php was what I’ve been searching for – for the last 3 days!!!!

    Its a long story but my website now actually has working navigation.

    I am so happy right now. lol

    Again….big thanks!

Got something to say?

You must be logged in to post a comment.