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