WordPress Numeric Pagination Without Plugin

Once at our project we have faced up with task to make a good looking numeric pagination instead of the default boring navigation style at WordPress. So now we want show how to implement it without using plug-in fast and easily.

Of course we don’t argue that WP-PageNavi is fine developed WordPress plug-ins and it’s great for those who don’t like to have a deal with WordPress code. But you should realize that plugin makes site heavy and numeric pagination instead is search engine friendly and user can instantly get access to all your pages and know the total number of pages.

Let’s begin with some codes. The function below should be added to the 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 class="pagination"><span>Page' . $paged . ' of  ' . $pages . '</span>';
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo '<a href="' . get_pagenum_link(1) . '"><< First</a>';
if($paged > 1 && $showitems < $pages) echo '<a href="'.get_pagenum_link($paged - 1).'">< 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 ></a>';
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo '<a href="' . get_pagenum_link($pages) . '">Last >></a>';
echo '</div>\n';
}
}

?>

And voila, our list of numbered pages is ready!

Now if we want it to look nicely, then let style it by making the active page list highlighted with a contrasting background color. Just add next lines to your theme’s style.css file:


.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
color: #fff;
text-decoration:none;
}
.navigation li { display: inline; }
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
background-color: #6FB7E9;
border-radius: 3px;
cursor: pointer;
padding: 12px;
padding: 0.75rem;
}
.navigation li a:hover,
.navigation li.active a {
background-color: #3C8DC5;
}

And here is what you eventually will get.

 

Hope this tutorial gonna be helpful for you.