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!

RNDGen

Discover RNDGen

Unleash your development potential with powerful dummy data and password generator. Supercharge your workflow now!

Generate Data Now!

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

Press Release: Top Developers in New York Recognition

For almost a decade, we have been dedicated to our clients and their products’ success. We are so proud to receive another Clutch Award, this time as top developers in New York!
23 Aug 2019 5 min read

How to Add a Custom Post Status In WordPress

This is an easy to follow tutorial for creating a Custom Post Status in Wordpress. After searching through lots of ready decisions and faced that none of those wasn't working so then when we handle that task decided to share it with you, so now you can save your time.
5 Mar 2020 10 min read

WordPress Color Switch Feature

This useful WordPress Feature is rather easy to implement, and it can be interesting for those who time to time need to change some elements in a website design.
14 Feb 2018 8 min read