How To Use WP_Query to Create Pagination in WordPress
— June 14, 2017
• 3 Minutes Read
This tutorial will detail how to create a custom WordPress loop with pagination.
To implement this custom loop, I will use WP_Query class to setup a new query, and then display the posts with pagination. Now remember that the default WordPress pagination (as implemented by Next Page and Previous Page) is easy to implement and code. However, this setup does not go well with modern themes.
Custom Query
This tutorial is based on WP_Query, and thus I would recommend you read up relevant codex pages to understand how this class works.
A sample of the query being run is as follows:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<?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(); |
Code to Render Pagination
Put the following code in a custom static page by creating a template file (with the name CusotmPage.php) in the theme folder.
|
1 2 3 |
<?php if (function_exists("pagination")) { pagination($custom_query->max_num_pages); } ?> |
Create a page in the admin area and select the template as shown below:
Pagination Function
The following code is required for the custom pagination to function. Put this code in functions.php ( located in the theme folder):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
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"; } } |
Styling for the Pagination
Open up the style.css (located in the theme folder) and add the following code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
/* 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; } |
Here is the output of the custom pagination code:
Conclusion
In this tutorial, I discussed how you could easily setup custom pagination for your WordPress website. The idea is implemented through WP_Query class. If need help with the code or have a question about this tutorial, feel free to comment below.
Create Faster WordPress Websites!
Free eBook on WordPress Performance right in your inbox.
Moeez is ‘The’ blogger in charge of WPblog. He loves to interact and learn about WordPress with people in the WordPress community. Outside his work life, Moeez spends time hanging out with his friends, playing Xbox and watching football on the weekends. You can get in touch with him at moeez[at]wpblog.com.
