WordPress Numeric Pagination Without Plugin

WordPress Numeric Pagination Without Plugin

7 May 2017 8 min read

Once at our project one of our Junior Dev has faced up with a task to make a good looking numeric pagination instead of the default boring navigation style at WordPress. Although it seems pretty simple for a regular developer, still we want to share with you this small step-by-step guide to show you 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 a 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
/**
* Pagination
*
* @param int $pages number of pages.
* @param int $range number of links to show of lest and right from current post.
*
* @return html Returns the pagination html block.
*/
function wds_pagination($pages = '', $range = 4) {
global $paged;
$showitems = ($range * 2)+1; // links to show
// init paged
if(empty($paged))
$paged = 1;
// init pages
if($pages == '') {
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages)
$pages = 1;
}
// if $pages more then one post
if(1 != $pages) {
echo '<div class="wds-pagination"><span>Page ' . $paged . ' of ' . $pages . '</span>';
// First link
if($paged > 2 && $paged > $range+1 && $showitems < $pages)
echo '<a href="' . get_pagenum_link(1) . '"><< First</a>';
// Previous link
if($paged > 1 && $showitems < $pages)
echo '<a href="'.get_pagenum_link($paged - 1).'">< Previous</a>';
// Links of pages
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) . '">' . $i . 
'</a>';
// Next link
if ($paged < $pages && $showitems < $pages)
echo '<a href="' . get_pagenum_link($paged + 1) . '">Next ></a>';
// Last link
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages)
echo '<a href="' . get_pagenum_link($pages) . '">Last >></a>';
echo '</div>';
}
}

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:

.wds-pagination {
margin: 10px auto;
text-align: center;
}
.wds-pagination a,
.wds-pagination span {
color: #fff;
display: inline-block;
text-decoration:none;
background-color: #6FB7E9;
border-radius: 3px;
cursor: pointer;
margin: 0 5px;
padding: 0px 10px;
line-height: 32px;
}
.wds-pagination a:hover,
.wds-pagination span.current {
background-color: #3C8DC5;
}
.wds-pagination span.current {
cursor: default;
}

And in the end, you’ll have just to switch standard pagination to this one. For each theme , it’s different, here are a couple of examples:

<!-- for Twenty Twenty theme -->
<?php /* get_template_part( 'template-parts/pagination' ); */ ?>
<?php wds_pagination(); ?>

<!-- for Twenty Nineteen theme -->
<?php /* twentynineteen_the_posts_navigation(); */ ?>
<?php wds_pagination(); ?>

<!-- for Twenty Thirteen theme -->
<?php /* twentythirteen_paging_nav(); */ ?>
<?php wds_pagination(); ?>

And here is what you eventually will get.

default-numeric-navigation

Hope this tutorial gonna be helpful for you.

P.S. Also we should mention that such pagination will work only for templates with a standard enumeration of posts (blog, category, archive, etc.) or where standard topic pagination is used.

ERP development final cta

Get a Custom Solution with Web Design Sun

At Web Design Sun, we specialize in building web applications for clients in every business and industry.  If you’re interested in custom applications for your business, contact us today.

Contact us today to get started

More From Blog

Manually Creating Custom Taxonomies In WordPress

Learn how to create a custom taxonomy that will suit your needs. Create a custom taxonomy manually – including a few advanced development examples.
4 Oct 2018 18 min read

How Much Does It Cost To Build a Web Application?

You want to build a web application, but you’re worried about the cost. If that sounds familiar, we understand your fear. We’ve wrote this article to show that there are ways to control the costs, and it’s possible to get a custom web application that doesn’t break the bank.
19 Nov 2021 23 min read

The Ultimate Guide For Any Re-Branding Strategy

When every brand is rushing to do something new and exciting, things get passed over and mistakes are made in the process of “re-branding.” These mistakes can turn off previous customers or lead new customers down the wrong path.
26 Jan 2018 16 min read