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!