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 include('navigation.php'); ?>

Then, enjoy it! :)

Eric Ma

Eric is a systems guy. Eric is interested in building high-performance and scalable distributed systems and related technologies. The views or opinions expressed here are solely Eric's own and do not necessarily represent those of any third parties.

10 comments:

  1. Pingback: 自行建立Navigation.php,捨棄WP-Pagenavi | Blog|WSQSITE
    1. Thanks a lot, your method helped me implement paged navigation on my wordpress blog (as opposed to having “older entries” and “newer entries”). Furthermore, this is by far the easiest and cleanest method I could find on the web. Thanks a ton!

  2. Hello,

    Does this have a page limit to display? it will show all the pages? What I mean is, if I have a blog with 100 pages for example, will it show from 1 to 100 all the numbers?

Leave a Reply

Your email address will not be published. Required fields are marked *