Friendly WordPress Navigation Using Page Numbers Instead of Next and Previous Links

The navigation will be more user friendly with page numbers instead of next and previous links since users can navigate much quicker to the page they want to see especially when there are a lot of pages.

It is also good method for SEO (Search Engine Optimization) because it creates a tighter inner link structure.

WordPress provides the paginate_links() function for getting the pages list. What we need to do is setting the suitable arguments and pass them to the function. Here we get a list and then use CSS to make this list be displayed in one line.

First create a file named navigation.php in the theme directory. The content of navigation.php is:

<?php
global $wp_rewrite;
$paginate_base = get_pagenum_link(1);
if (strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()) {
    $paginate_format = '';
    $paginate_base = add_query_arg('paged', '%#%');
} else {
    $paginate_format = (substr($paginate_base, -1 ,1) == '/' ? '' : '/') .
        user_trailingslashit('page/%#%/', 'paged');;
    $paginate_base .= '%_%';
}

echo '<div>'. "n";
echo paginate_links( array(
    'base' => $paginate_base,
    'format' => $paginate_format,
    'total' => $wp_query->max_num_pages,
    'mid_size' => 10,
    'current' => ($paged ? $paged : 1),
    'type' => 'list',
    'prev_text' => __('&laquo; Previous', 'default'),
    'next_text' => __('Next &raquo;', 'default'),
));
echo "n</div>n";
?>

Second, edit the style.css file in the theme directory to choose the style that fits the theme best.

This is the sytle I like:

/* page navi */
.page-navi li { line-height:0%; display:block; float:left; }
.page-navi a, .page-navi a:visited, .page-navi a:hover,
.page-navi span.pages, .page-navi span.extend, .page-navi span.current, .page-navi span.dots
{ font-size:11px; line-height:100%; margin:4px -1px 4px 0; padding:2px 10px; display:block; float:left; border-right:1px solid #555; border-left:1px solid #555; }

Last, change the navigation part of index.php archive.php and search.php to code like this:

<?php if (function_exists('wp_pagenavi')) { wp_pagenavi(); } else { include('navigation.php'); } ?>

Then, enjoy it! :)

Updated on Apr. 2 2010. Format and change some typos.