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

Life Coaching Development for Alex Becker

During the last year, our team was working on several projects of a young and very successful entrepreneur Alex Becker.
30 Mar 2017 5 min read

Web Design Sun Grabs GoodFirms’ Attention by Creating Effective Business Solutions

Recently, the GoodFirms unit interviewed our CEO, in which he mentions the idea behind the commencement of the business along with the working standards of the company.
26 Mar 2020 4 min read

How to speed up your WP website

There are surely tonnes of other tips. But we concentrated on the key points that will definitely help to speed up your WordPress site.
20 Dec 2017 9 min read