Latest NewsBlog Detail

Single Post

Use WP_Query to Create Pagination in WordPress

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:

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

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

Pagination Function

The following code is required for the custom pagination to function. Put this code in functions.php ( located in the theme folder):

// Register Custom 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 "<nav aria-label='Page navigation example'>  <ul 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)? "<li class=\"page-item active\"><a class='page-link'>".$i."</a></li>":"<li class='page-item'> <a href='".get_pagenum_link($i)."' class=\"page-link\">".$i."</a></li>";
            }
        }

        if ($paged < $pages && $showitems < $pages) echo " <li class='page-item'><a class='page-link' href=\"".get_pagenum_link($paged + 1)."\">i class='flaticon flaticon-back'></i></a></li>";
        if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo " <li class='page-item'><a class='page-link' href='".get_pagenum_link($pages)."'><i class='flaticon flaticon-arrow'></i></a></li>";
        echo "</ul></nav>\n";
    }
}

 

Tags
Sarker Allex
Sarker Allex

Co-Founder & Director at Prokash IT

Provesh is Co-Founder and Director at Proveshit. He is responsible for managing, growing open source technologies team and has spearheaded more than 250 projects in Salesforce CRM alone. He provides consulting and advisory to clients looking for services relating to CRM(Customer Relationship Management) and ECM(Enterprise Content Management). In the past, Pratyush has held consulting roles with various global technology leaders, such as Globallogic & HCL in Bangladesh. He holds an Engineering graduate degree from Bangladesh Institute of Technology, Roorkee.