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:

* 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
$paged = 1;
// init pages
if($pages == '') {
global $wp_query;
$pages = $wp_query->max_num_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 . 
// 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!


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;
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.


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

Best AI Services for Generation Content

Artificial Intelligence (AI) has come a long way in recent years and has proven to be a valuable tool for content generation. With the help of AI, businesses and individuals can now generate high-quality content in a fraction of the time it would take to do it manually. In this blog post, we will take a look at some of the best AI services currently available for content generation and how they can help you save time and effort.
23 Jan 2023 11 min read

Types of Web Development Outsourcing

There are a lot of different types of web development outsourcing, so let’s find out which is suitable for your business.
1 Feb 2017 7 min read

How to create the perfect website development brief

If you’ve been having thoughts about building a website for your business or even updating your current site, one of the first things you should do is create a website brief.
2 Nov 2017 15 min read