How to Use WP_Query to Create Pagination in WordPress

One of the productive ways to increase page views of your website have an optimal bounce rate is to use WP_Query to create pagination in WordPress.

In this tutorial, we are going to walk you through easy to follow guide to add a custom WordPress loop with pagination.

What is WP_Query?

WP_Query is one of the most important classes in WordPress since it is what gives you access to records, posts, pages and custom post types in the database.

Meanwhile, the developers don’t need to write complex SQL queries against the database in order to receive the needed information on posts, pages or custom post types, because WP_Query will do it all for us.

What is pagination in WordPress and why do you need it?
Pagination is one of the core features any WordPress user can use for a variety of purposes. It’s a good practice of parting long posts into several pieces and showcasing each of them with a new page.

If you are using a well coded WordPress theme at your disposal, in all probability, using tag in your post added just wherever you need the post to end and start on the next page will do the job for you.

It’s not hard to guess that long posts will take a long time to load and will be inconvenient for the website guests or blog followers to read.

Splitting your article or long descriptions into as many pages as seem expedient will make it easier for the readers to digest all the information without getting annoyed.

If you are a WordPress webmaster or WordPress website owner, we are sure you know about WP built in pagination functionality you can easily use with links or numerical pagination for splitting long posts into as many different parts as needed and showcasing them with previous and next pages accordingly.

Apart from making your articles and posts easier to follow and more legible, pagination has other benefits as well.

It is going to make the overall look and feel of your site more accurate and compact, add your site’s page views, help reduce bounce rate, contribute to SEO ranking and provide you with more pages to place advertisements and more.

However, this method is not always working effortlessly with contemporary WordPress themes and templates. Therefore, we offer you to use WP_Query to create pagination in WordPress.

Before we’ll go deeper into the process detailing how to use WP_Query to create pagination in WordPress, we recommend you to familiarize yourself with WP Query class reference in WordPress Codex: https://developer.wordpress.org/reference/classes/wp_query/.

Now, when you have a general idea on WP_Query and its usages, let us share a sample of query with you.

<?php

/**

* Template Name: Custom Page

*/

get_header(); ?>

<?php

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

$args = array(

'posts_per_page' => 4,

'paged' => $paged

);

$custom_query = new WP_Query( $args );

?>

<!----start-------->

<div class="wrap">

<div id="primary" class="content-area">

<main id="main" class="site-main" role="main">

<?php

while($custom_query->have_posts()) :

$custom_query->the_post();

?>

<div>

<ul>

<li>

<h3><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h3>

<div>

<ul>

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

</ul>

<ul>

<p><?php echo the_content(); ?></p>

</ul>

</div>

<div>

</li>

</ul>

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

<?php endwhile; ?>

<?php if (function_exists("pagination")) {

pagination($custom_query->max_num_pages);

} ?>

</main><!-- #main -->

</div><!-- #primary -->

</div><!-- .wrap -->

<!----end-------->

<?php get_footer();

How to use WP_Query to create pagination in WordPress
Code for rendering pagination
Create a template file named CustomPage.php in the theme folder and add the below mentioned piece of code in a custom static page.

<?php if (function_exists("pagination")) {

pagination($custom_query->max_num_pages);

} ?>

Go to the Admin dashboard to create a page and choose custom page as a template.
Further, you will need to use the following code to make custom pagination work: You will need to add this code in functions.php (to be found in your theme folder).

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).”‘>« First</a>”;

if($paged > 1 && $showitems < $pages) echo “<a href='”.get_pagenum_link($paged – 1).”‘>‹ 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 ›</a>";

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

echo "</div>\n";

}

}

Now that we have managed to use WP_Query to create pagination in WordPress, let’s pass on to the styling part. Naturally, now we’ll have to do with style.css file instead of function.php.

Find style.css in the theme folder and add the code below to it.

/* Pagination */
.pagination {
clear:both;
position:relative;
font-size:11px; /* Pagination text size */
line-height:13px;
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: #555; /* 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;
}

That’s it. We do really hope our article will help you use WP_Query to create pagination in WordPress without a hitch. In case of any question about this tutorial or codes shared in it, feel free to ask for our assistance!

When you are setting up your website on WordPress, one of the things that you may want to consider is using wp_query to create pagination in WordPress.

Of course, you are bound to wonder why you should bother with pagination, but here’s why pagination is an important aspect of any website.

Pagination is the process by which you can split up a long post into shorter posts with sections of the original post being posted on other pages with a link back to the original post.

This helps to increase the page views on your website and can prove to be invaluable where SEO and rankings are concerned.

This is why you need to use wp_query to create pagination in WordPress so that you can customize the post, keep it shorter and in the process, help improve user experience. Here are a few reasons as to why pagination is important and why it is essential for your website.

• Clean, crisp look: As a result of pagination, you should be able to keep your posts shorter and in the process, leave your front page uncluttered. This should enable you to present your customers with a clean, crisp look.

  Moreover, with posts being trimmed shorter, you should be able to make full use of the white space strategically and direct the user’s attention to the relevant parts of your website, perhaps to a call to action so that they can click on the same.

• Marketing: With pagination, you should be able to trim the length of the posts down and optimize it in the process as well.

  With this plugin, you can decide which posts you want to be trimmed shorter and even customize the post, so that it appears more attractive to the end user.

  As a result your traffic should pick up and in the process, you should also be able to engage more with your users than before.

• User engagement: No user wants to read a long post right on the front page; that’s why it is essential for you to use pagination to keep the posts short.

  Users would appreciate the uncluttered look, the fast loading pages and as a result, you should be able to engage more with them.

  With pagination coming into play, you should be able to keep the bounce rates at optimal levels, keep your audience interested enough and more importantly, increase the page views on your website.

  As a result, you are bound to increase your rankings as well as give a boost to your online conversion rate.

These are some of the reasons as to why you need to have pagination on your website as it can help your website perform even better than before.

You can decide how short you would like the posts to be, and with pagination, you should be able to decide the length, and even the look of the posts. With this feature, you should be able to give your users a better user experience.