How to inculcate numeric pagination in WordPress blog pages?


Pagination is considered to be an important asset of every website/blog. Your target audience can’t have an enjoyable experience on your site unless and until they have an easy access to effective pagination options. Often website developers have a difficult time adding numeric pagination to web/blog pages related to a WordPress powered blogging website. This blog is an approach to combat all the confusions and issues that people are facing when adding effective numeric pagination to the WordPress blog pages.

What makes numeric pagination better than the traditional “Previous Page” and “Next Page” pagination?

As opposed to the default “Previous Page” and “Next Page” pagination, numeric pagination has received a tremendous amount of positive feedback from internet users residing in different parts of the world. The reason for this being the amount of frustration and annoyance that is associated with the former type of pagination.

The “Previous Page” and “Next Page” pagination denotes poor UX design and must be avoided to the fullest because it may deter the users from visiting your website in the future.

Now, let’s hop onto the steps involved with addition of numeric pagination in WordPress blog pages

Setting up the custom WP_Query

As the foremost step in addition of numeric pagination into WordPress blog pages, you need to set up your custom WP_Query properly and make sure that the query is returning the post data. Here’s an example of setting up a custom WP_Query:


<?php

$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1

$args = array(

'posts_per_page' => 8,

'paged' => $paged

);

$custom_query = <b>new</b> WP_Query( $args );

while($custom_query->have_posts()) :

$custom_query->the_post();

<b>?></b>

<div>

<ul>

<li>

<h4><a class="blog-title" href="<b><</b>?php the_permalink(); <b>?></b>" rel="bookmark"><b><</b>?php the_title(); <b>?></b></a></h4>

<span>Written <i>by:&nbsp;</i> <a class="link" href="<b><</b>?php bloginfo('url'); <b>?></b>/author/<b><</b>?php the_author(); <b>?></b>"> <b><</b>?php the_author(); <b>?></b></a> <i>on</i> <b><</b>?php the_time('F j, Y'); <b>?></b> <a class="link" href="<b><</b>?php the_permalink(); <b>?></b>#comments "><b><<em>?php</em></b> comments_number( '', '- 1 comment', '- % comments' ); <b>?></b></a></span>

<div>

<ul>

<div><a href="<?php the_permalink(); <b>?></b>"><b><</b>?php the_post_thumbnail('thumbnail'); <b>?></b></a></div>

</ul>

<ul>

<li class="work-description"><b><</b>?php echo the_excerpt(); <b>?></b></li>

</ul>

</div>

<div><b><</b>?php the_tags(); <b>?></b>

</li>

</ul>

</div> <!-- end blog posts -->

<b><</b>?php endwhile; <b>?></b>

</div>

Setting up an appropriate Pagination Style

As the second step, you need to set up a proper pagination style which would directly go into the original theme or the child theme’s main .CSS file. It is the pagination style that dictates the way pagination would be made available to the users in the front-end of the website. Irrespective of whether you’re working on the main theme or a child theme, setting up the pagination style is utmost important. Here’s an example that shows you the code that needs to be used for setting the pagination style:


/* Pagination */

.pagination {

clear:both;

position:relative;

font-size:12px; /* Pagination text size */

line-height:14px;

float:right; /* Pagination float direction */

}

.pagination span, .pagination a {

display:block;

float:left;

margin: 2px 2px 2px 0;

padding:6px 9px 5px 9px;

text-decoration:none;

width:auto;

color:#fff; /* Pagination text color */

background: #556; /* Pagination non-active background color */

-webkit-transition: background .15s ease-in-out;

-moz-transition: background .15s ease-in-out;

-ms-transition: background .15s ease-in-out;

-o-transition: background .15s ease-in-out;

transition: background .15s ease-in-out;

}

.pagination a:hover{

color:#fff;

background: #6AAC70; /* Pagination background on hover */

}

.pagination .current{

padding:6px 9px 5px 9px;

background: #6AAC70; /* Current page background */

color:#fff;

}

For the convenience of my readers, I’ve commented out each CSS declarations to make it easy for you to swap out colors to match your site’s theme. You can simply go ahead and paste the aforementioned code into your theme’s main .CSS file.

Step 3-Including the pagination function

As the third step, you need to insert the below mentioned code for the pagination to function properly.


<?php

// numbered pagination

function pagination($pages = '', $range = 4)

{

$showitems = ($range * 2)+1;

global $paged;

if(empty($paged)) $paged = 1;

if($pages == '')

{

global $wp_query;

$pages = $wp_query->max_num_pages;

if(!$pages)

{

$pages = 1;

}

}

if(1 != $pages)

{

echo "<div class=\"pagination\"><span>Page ".$paged." of ".$pages."</span>";

if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo; First</a>";

if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo; Previous</a>";

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)."' class=\"inactive\">".$i."</a>";

}

}

if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next &rsaquo;</a>";

if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last &raquo;</a>";

echo "</div>\n";

}

}

?>

You can simply copy paste the above code into your Functions.php file, without making any other changes.

Step 4- Displaying the Numeric Pagination

Once you’re done with all the above mentioned steps of setting up the numeric pagination, you’ll definitely want it to appear on your blog page. For this, all you need to do is simply place the following code into your theme file.


<?php if (function_exists("pagination")) { pagination($custom_query->max_num_pages); } ?>

Once you’re done with inserting this code in the theme file, the numeric pagination displayed on your screen will look something like this:

Numeric Pagination Code

Concluding Words

Thanks for sparing a moment to check out my blog. I’m quite sure the directions outlined in this post would aid you in having a fully functional numeric pagination on your WordPress blog page.

Please don’t forget to share your vital reviews/feedback using the comments box provided right under this post.




2 Brilliant Comments - Join Discussion Now!

  1. Hiten says:

    Hi Rajesh,

    Awesome post with a nice skin capture tutorial. I like the way to describe the whole thing I feel that I am learning in any classroom. Thanks for sharing this buddy. !!

    Regards!!
    Hiten

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>