Skip to content

How To Add Numbered Page Navigation To WordPress

If your WordPress blog has a large amount of blog posts, then you should add a numbered page navigation to your WordPress for easy navigation. Your audience deserves a better navigation through your blog pages and archives. The default WordPress pagination comes with “older posts” and “newer posts” text, which is just too simple.

In this tutorial, I’ll learn how to add numbered page navigation to your WordPress manually (without a plugin) and automatically (with a plugin). Let’s get started:

With A Plugin

There are tons of plugins in WordPress’ Plugin Directory but most of them would disappoint you with less and useless features. but WP-PageNavi is the best plugin in the entire world for this task. You can download WP-PageNavi plugin from this link or you can also search the plugin from your WordPress.

Without A Plugin

You can also add numbered page navigation to your WordPress by following these steps:

First, add following code to your current theme’s functions.php file:

function pagination($pages = ”, $range = 4)
{
$showitems = ($range * 2)+1;
global $paged;
if(empty($paged)) $paged = 1;
if($pages == ”)
{
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages)
{
$pages = 1;
}
}
if(1 != $pages)
{
echo “<div class=\”pagination\”><span>Page “.$paged.” of “.$pages.”</span>”;
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo “<a href=’”.get_pagenum_link(1).”‘>&laquo; First</a>”;
if($paged > 1 && $showitems < $pages) echo “<a href=’”.get_pagenum_link($paged – 1).”‘>&lsaquo; Previous</a>”;
for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
echo ($paged == $i)? “<span class=\”current\”>”.$i.”</span>”:”<a href=’”.get_pagenum_link($i).”‘ class=\”inactive\”>”.$i.”</a>”;
}
}
if ($paged < $pages && $showitems < $pages) echo “<a href=\”".get_pagenum_link($paged + 1).”\”>Next &rsaquo;</a>”;
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo “<a href=’”.get_pagenum_link($pages).”‘>Last &raquo;</a>”;
echo “</div>\n”;
}
}

Save your functions.php file. One-by-one open index.php, archive.php, search.php, and loop.php (only if exist) and replace “older posts” or “older entries” lines with following code:

<?php if (function_exists(“pagination”)) {
pagination($additional_loop->max_num_pages);
} ?>

That’s it. Now, we will stylify our page navigation with some CSS. Add following CSS add the bottom of your theme’s style.css file:

.pagination {
clear:both;
padding:20px 0;
position:relative;
font-size:11px;
line-height:13px;
}
.pagination span, .pagination a {
display:block;
float:left;
margin: 2px 2px 2px 0;
padding:6px 9px 5px 9px;
text-decoration:none;
width:auto;
color:#fff;
background: #555;
}
.pagination a:hover{
color:#fff;
background: #3279BB;
}
.pagination .current{
padding:6px 9px 5px 9px;
background: #3279BB;
color:#fff;
}

Save it & that’s it!

2 thoughts on “How To Add Numbered Page Navigation To WordPress”

  1. This code was works quite well! One suggestion for non-template sites, i.e. sites in which WordPress is embedded, the following code will be needed to ensure that the pagination works properly:

    $paged = ( get_query_var( ‘paged’ ) ) ? get_query_var( ‘paged’ ) : 1;
    $query = new WP_Query( ‘paged=’ . $paged );
    $posts = $query->get_posts();

Leave a Reply

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