How to Add Numbered Pagination in a WordPress Blog

Posted In: Tutorials, Web Designing, Wordpress on Nov, 30 2014 | Leave a Comment

Today I will demonstrate how to customize the wordpress navigation by bypassing the default “older post-newer post” navigation and setting up a custom numbered pagination. Numbered pagination is a cool and much more professional way of navigating through the site. And creating it is pretty simple. Read on, if you want to add some customization magic to your next wordpress project.

By default wordpress would have something like this at the bottom of the archive or category or index page… which is, to be honest, a bit boring! And also it does not allow to to jump from the 1st page to the 5th page, you need to go through each pages one by one which is not very user friendly.

pagination

In this post I will show you how you can replace this boring navigation system with this cool, user friendly numbered pagination.

numbered pagination

The PHP
Place this code in your theme’s function.php file:

//pagination function

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";
     }
}

And add this styling to your theme’s custom.css or style.css file:

/* Pagination */
.pagination {
 clear:both;
 position:relative;
 font-size:11px; /* Pagination text size */
 line-height:13px;
 float:left; /* Pagination float direction */
 padding-right:30px;
}
 
.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; /* Pagination text color */
 background: #afafaf; /* Pagination non-active background color */
 -webkit-transition: background .15s ease-in-out;
 -moz-transition: background .15s ease-in-out;
 -ms-transition: background .15s ease-in-out;
 -o-transition: background .15s ease-in-out;
 transition: background .15s ease-in-out;
}
 
.pagination a:hover{
 color:#fff;
 background: #ED7217; /* Pagination background on hover */
}
 
.pagination .current{
 padding:6px 9px 5px 9px;
 background: #ED7217; /* Current page background */
 color:#fff;
}

And finally to add the numbered pagination of wordpress archives add this piece of code to any place you want the pagination to appear:

<?php if (function_exists("pagination")) {
pagination($custom_query->max_num_pages);
} ?>

And you are done!