If your WP blog has a large number of posts, then adding numbered page navigation is a great way to give your readers an easy navigation to your blog's archives. The default WordPress pagination comes with ‘older posts’ and ‘newer posts’ but those look good if your blog has only few articles.
In this tutorial, I'll tell you how to add numbered page navigation to your WordPress, both manually and automatically. Let's get started with automatic method (by using a plugin).
By Using A Plugin:
I recommend you to use this way, since it's easy and much better. Click here to download or search and install WP-PageNavi to your blog. Activate this plugin and that's it.
Custom Method:
You can also manually add numbered page navigation to your WP, just follow these simple steps:
- Go to your WP Dashboard > Appearance > Editor
- Open the functions.php file from the right sidebar.
- Add the following lines of code to your functions.php file and publish.
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).”‘>« First</a>”;
if($paged > 1 && $showitems < $pages) echo “<a href=’”.get_pagenum_link($paged – 1).”‘>‹ 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 ›</a>”;
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo “<a href=’”.get_pagenum_link($pages).”‘>Last »</a>”;
echo “</div>\n”;
}
}
- One-by-one open index.php, archive.php, search.php, and loop.php (only if exist) file from the right sidebar.
- Find ‘older posts’ or ‘older entries’ and replace those lines with the below code.
<?php if (function_exists(“pagination”)) {
pagination($additional_loop->max_num_pages);
} ?>
That's it! You can also add some CSS to make it look better.
- On editor, open the style.css file from the right sidebar.
- Add following CSS add the bottom of 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;
}
That's it! Don't forget to leave a comment.
