Create Post Pagination without Plugin

We are already now, there are wonderful plugin to create Post Pagination on WordPress that call WP Pagenavi. But today I will share it how to create Post Pagination without plugin without any plugin installed.

WP Pagination without Plugin - Custo Barcelona Spring 2009 Collection

This method only using litle bit functions and we can use it easely. Original Source code by Kriesi. Thanks for creating wonderful tutorial.

Let’s move on, the first time before we use this functions on your WordPress Loop, open your functions.php and write down this code

function the_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 "<div class='pagination'>";
         if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo;</a>";
         if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo;</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)."'>&rsaquo;</a>";
         if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>&raquo;</a>";
         echo "</div>n";
     }
}

That’s it, now you have Pagination function, next step use this functions on your WordPress Loop, or replace standard WordPress navigation with this method

the_pagination();

or using this method for more expert implementation

function the_pagination($pages = '', $range = 2)

Now let’s play with the CSS, open your style.css and paste this code

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

The CSS only sample, of course you can use and create your own CSS. That’s it, now you have Post Pagination without plugin on your WordPress site

Photo courtesy of David Shankbone Flickr