How to Create a Numeric Pagination in WordPress

This tutorial will display a numeric pagination on the front page of your WordPress-powered website — or on the archive page where you want to display the numeric pagination. The image of the numeric pagination is shown below. You may edit the code to suit your design needs.

Numeric Pagination

1. Copy the lines of code below and paste them into the functions.php file:

// Display Numeric Pagination Nav
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 class=\"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";
}
}

2. Copy the code below and paste them into the index.php file — in the part where you want to display the numeric pagination:

<?php if (function_exists("pagination")) {
pagination($additional_loop->max_num_pages);
} ?>

3. Copy the bits of code below and paste them into the style.css file:

/* Numeric Pagination Styling */
.pagination {
clear: both;
position: relative;
width: 100%;
padding-left: 0;
padding-top: 30px;
padding-bottom: 40px;
}

.pagination span, .pagination a {
display: block;
float: left;
font-size: 16px;
line-height: 28px;
margin: 2px 2px 2px 0;
padding: 10px 16px;
text-decoration: none;
width: auto;
color: #ffffff;
border-radius: 8px;
background: #008040;
}

.pagination a:hover{
color: #ffffff;
background: #004d26;
}

.pagination span.current{
background: #dddddd;
color: #008040;
}

4. Done! You can check the index page or the archive page where you put the numeric pagination.