in ,

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:


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;
$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";


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:


.pagination {
padding:20px 0;

.pagination span, .pagination a {
margin: 2px 2px 2px 0;
padding:6px 9px 5px 9px;
background: #555;

.pagination a:hover{
background: #E63F2A;

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


What do you think?

Written by Sopheap

The goal of me is sharing new ideas, inspiration art, fresh and useful resource, covering web design and development, graphic design, advertising, mobile development and life style.


Leave a Reply

Your email address will not be published.


WordPress Starter Themes For Developers

human readable time

Display Human Readable Time In WordPress