How to add pagination in WordPress without using a plugin

One of the most encountered problems when installing a fresh wordpress script is the pagination. By default it comes with the Older Posts and Newer Posts links at the bottom of the page. Unfortunately, this navigation option doesn’t give the visitor any indication about the number of available pages on the website. From the same user experience perspective the Older Posts / Newer Posts is a little bit counter-intuitive.

In general we are used to visualize events in a time scale from left to right, the one in the left happening before and WordPress tries be consistent with this. On the other side we want to press next/more to see more posts, moving further, to read more posts, not before. From this point of view the default wordpress navigation/pagination is also a little bit counter intuitive, so if don’t want to use a plugin, we should implement at the theme level the functionality to add pagination in wordpress without using a plugin.

There are many pagination plugins in wordpress which are very helpful to replace the default wordpress pagination. However, they come with a price:

  • Usually, when installing a navigation plugin we also have to modify the theme accordingly.
  • Sometimes the plugins needs to be have the css styles adjusted to be consistent with the themes.
  • Each time a new plugin is updated to a new version we need to check and update the styles, if they are defined in the plugin directory, as the customized css will be rewritten by the new version css.
  • Extra css is loaded from the plugin directory on each page request, affecting the page speed.
  • An extra plugin has a small overhead on the wordpress performance.

In order to avoid installing a plugin is to implement the pagination directly in the wordpress theme. The advantage of the this method is that it avoids the above mentioned drawbacks and in the same time none of the wordpress installation files are not changed, so wordpress upgrades are not affected.

Practically the code contains 3 parts:

  • Php implementation which reads the total number of posts for the current url(can be the home page or category, tag, search page,…). This will be added functions.php file in the theme directory.
  • Css style sheet, containing the style. For optimization it can be added in the style.css file, or directly in php code.
  • The actual integration. The existing Older Posts / Newer Posts code should be replaced with the new function defined in functions file for homepage/search/tag/… theme files.
function kriesi_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 "

\n”; } }

The style code to be added in style.css file in theme directory:

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

Source: http://www.kriesi.at/archives/how-to-build-a-wordpress-post-pagination-without-plugin

Leave a Reply

Your email address will not be published. Required fields are marked *