In this tutorial you will learn how to create a custom loop with WordPress pagination. To integrate this custom loop, I am using WP_Query class to set a new query, and then display WordPress posts with pagination. The default WordPress pagination is simple to implement.
Custom Query
This tutorial shows WP_Query, and I would suggest you to read up relevant codex pages to understand how this WP_Query works.
An example of the query being run is as follows:
<?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
Add the following code in a custom page by creating a template file and name it as CustomPage.php in the theme folder.
<?php if (function_exists("pagination")) { pagination($custom_query->max_num_pages); } ?>
Next create a page in admin area and select the template as shown below:
Pagination Function
Add following code in functons.php for the custom pagination to function.
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
Add the following code in style.css:
/* 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; }