When converting HTML templates into the WordPress framework, or translating a design into theme files, quite often I come up against post pagination

The default WordPress pagination consists of ‘Previous’ and ‘Next’ links, not very inspiring. A better alternative is to have numbered links with left and right jump buttons to skip to the end of the pagination loop. Sure there is probably a plugin to customize the HTML that pagination outputs, but that’s a bit easy and no fun is it?

Luckily kriesi.at has already done the hardwork for us by giving away a theme function, that goes into your functions.php and that will output exactly what we are after. With a little modification you can get the function to output any HTML code you want, like an unordered list of links for example, as shown in my version of kriesi.at’s function below during a WordPress conversion of an ThemeForest HTML template.

Once you have added the function into your functions.php, simply call learnplus_blog_pagination() from your template.

/**
 * 
 * 
 * Blog index.php pagination html
 * http://www.kriesi.at/archives/how-to-build-a-wordpress-post-pagination-without-plugin
 * 
 * 
 */ 

function learnplus_blog_pagination($pages = '', $range = 2)
{  
     $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 "<nav class='text-center'>\n\n<ul class='pagination'>";
         if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<li><a href='".get_pagenum_link(1)."' aria-label='Previous'><span aria-hidden='true'>&laquo;</span></a></li>";
         if($paged > 1 && $showitems < $pages) echo "<li><a href='".get_pagenum_link($paged - 1)."' aria-label='Previous'><span aria-hidden='true'>&lsaquo;</span></a></li>";
         

         for ($i=1; $i <= $pages; $i++)
         {
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
             {
                 echo ($paged == $i)? "<li class='current'><a href='".get_pagenum_link($i)."'>".$i."</a></li>" : "<li><a href='".get_pagenum_link($i)."' class='inactive'>".$i."</a></li>";
             }
         }

         if ($paged < $pages && $showitems < $pages) echo "<li><a href='".get_pagenum_link($paged + 1)."' aria-label='Previous'><span aria-hidden='true'>&rsaquo;</span></a></li>";  
         if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<li><a href='".get_pagenum_link($pages)."' aria-label='Previous'><span aria-hidden='true'>&raquo;</span></a></li>";
         echo "</ul>\n</nav>";
     }
}