How To Manually Add Pagination To Your WordPress Theme

Manual WordPress PaginationIf you are looking to add pagination support to your WordPress theme with cool numbers instead of the default next & previous post, you can do so using the famous PageNavi plugin, however, I much prefer adding pagination manually (original code by Kriesi) to my themes so people don’t have to go searching for a plugin. It also helps keep the site faster without all the external scripts and CSS.

Here is a quick tutorial for adding a simple page navigation to your theme that looks just like the pagination in my “Azul WordPress Theme“. Enjoy & Comment if you have any questions.

Pagination PHP

Simply add the following code at the end of your functions.php file.

<?php
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 id="clear"></div><div id="xs-pagination">";
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";
}
}
?>

Pagination CSS

Copy the following CSS and paste into your style.css file.

/* ----------------------  Pagination-------------------------- */
#xs-pagination{width:660px; float:left; margin:20px; font-size:11px}

#xs-pagination span,
#xs-pagination a{float:left; display:block; margin:2px 3px 2px 0; padding:1px 8px 1px 8px; text-decoration:none; color:#666; border-radius:5px; outline:#FFF; border:1px solid #FFF}

#xs-pagination a:hover{background:#f0f0f0; outline:1px solid #DDD; border:1px solid #FFF; text-shadow:1px 1px 1px #FFF}

#xs-pagination .current{background:#f0f0f0; outline:1px solid #DDD; border:1px solid #FFF; color:#666; text-shadow:1px 1px 1px #FFF}

Adding The Pagination Function To Your Theme

To call back the pagination function it’s really simple. All you have to do is add the following code to your theme files where you want to show any sort of pagination. The most common are your index.php, home.php, category.php, tags.php, archive.php and search.php. But if you have any custom page templates with pagination support, you’ll want to add them here.

Replace default pagination with the following (normally located somewhere after endif ):

<?php pagination(); ?>
AJ Clarke
Hey. My name is AJ and I am the boss around here. I own and operate WPExplorer. A website dedicated to everything I love about WordPress.
AJ Clarke
This article has 5 comments
  1. Anthony says:

    So I figured out how to navigate around the Pytheas theme. Suuuuper cool theme btw! I was just thinking it would awesome if one could paginate the home (portfolio) page. If I set my posts to like say a hundred, then it would automatically create an additional page. Thumbs up guys!!! Good work!!!

    1. Kyla says:

      We’re glad you like the theme! It’s definitely possible but it would have to reload the page… the best option would be an ajax load more option.

      Admin
    1. AJ Clarke says:

      The GoPress theme has pagination built-in. And actually since this post was created a long time ago…there is now a better way using the core function paginate_links(), learn more on the Codex.

      ps: Have you seen the updated GoPress Theme?

      Admin

Leave a Reply