Add Pagination To Your WordPress Theme

WordPress has the ability to split lists of posts or a single post into multiple pages for “paged” navigation. You can set how many posts to list on each page on the Reading screen (wp-admin > Settings > Reading). The “Blog pages show at most” value will be used by WordPress unless your theme overrides it, such as when it is using a custom query. When multiple loops (posts lists) are used in a theme template file only one loop, the main loop, can be paginated.

WordPress only comes bundled with the “next page” and “previous page” links to navigate between different blog overview pages. But you can change to numeric pagination. Numeric pagination is more user friendly, attractive, and SEO friendly. In this article I will show you how to add numeric pagination in your WordPress theme.

open up your theme’s functions.php file and add the following code:

[php]

//pagination
function sopheap_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";
}
}

[/php]

Add the following template tag in your theme’s index.php, archive.php, category.php, and any other archive page template.

[php]<?php sopheap_pagination(); ?>[/php]

Add Style to pagination, lets go ahead and add the following in your theme’s style.css file:

[css]

.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: #E63F2A;
}

.pagination .current{
padding:6px 9px 5px 9px;
background: #E63F2A;
color:#fff;
}

[/css]