Home » Web

Friendly WordPress navigation using page numbers instead of next and previous links

By: Zhiqiang Ma On: Jan 28, 2010 Views: 110 Comment: 1 Print Email
Tags: , , ,

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.

Read more:

Digg del.icio.us Stumble Techorati Facebook Newsvine Reddit Twitter
Mixx LinkedIn Google Bookmark Yahoo Bookmark MySpace LiveJournal Blogger RSS feed
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

One Comment »

  • ismail mert said:

    thank you i will use it

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.