How to Add custom Pagination in Custom Theme in WordPress

In most cases, pagination is intensely annoying. One of that worst scenarios is Advertisement . It further affects hugely on SEO too. But if it comes to page load time and user experience, pagination will be the best friend of your website. Many websites are promoting this pagination technique to divide the Hundreds of Posts or Pages into multiple pages. For such posts, Infinite Scrolling is too boring. WordPress too has the ability to split the lists of posts into multiple pages for PAGED navigation. Here we are going learn How to Add Custom Pagination in WordPress Step by Step.

WordPress Default Themes ( Twentyfifteen and TwentySixteen) comes with the “Next Page” & the “ Previous Page” links to steer between the different blog posts or pages. If you happen to have your own Custom Posts, let’s say numerous articles, you would need to build your own Pagination Links for a better user experience. Just imagine your favorite visitor has the slowest internet speed in the world and it’s taking him forever to load your web page. Scary right? Therefore, we need to create pagination function and work through that function to split our posts and pages.


How to Add Custom Pagination in WordPress


STEP 1: Adding the pagination in your Blog Template


Add the following code in your Theme’s file, either index.php or blog-template.php. Place wherever it is necessary. Your choice. But do it right.

<div class="blog-wrap">
  <ul class="clearfix">
  <?php
   global $query_string;
   $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
   $args = array('posts_per_page'=>3,'paged'=>$paged);
   query_posts($args);
   if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <li>
      <a href="<?php echo get_permalink(); ?>"><h2><?php the_title(); ?></h2> </a>
     <div class="blog-content">
       <p><?php the_excerpt(__('(more…)')); ?></p>
     </div>
   </li>
   <?php endwhile; endif; ?>
   <?php pp_pagination_nav(); ?>
   <?php wp_reset_query(); ?>
 </ul>
</div>

In the above code, we are using the pp_pagination_nav(); function to link the different split posts. We will be using this function to break our posts or  pages  in Step 2.
wp_reset_query(); is  also being used to destroy the previous query and sets up a new query. Remember, this is necessary.

ALSO READ  How to Create a Custom Search Form in WordPress

Before Pagination Query, Our Code will be by default. Please copy the above code, not this one. The below code is to demonstrate what our code looks like before adding pagination function.

<div class="blog-wrap">
 <ul class="clearfix">
  <?php
   if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <li>
     <a href="<?php echo get_permalink(); ?>"><h2><?php the_title(); ?></h2> </a>
     <div class="blog-content">
       <p><?php the_excerpt(__('(more…)')); ?></p>
     </div>
    </li>
  <?php endwhile; endif; ?>
  <?php wp_reset_query(); ?>
 </ul>
</div>

STEP 2: Adding the code in functions.php


For now, just Copy and Paste the following code in your Theme’s functions.php. We will not discuss the details about it right now.

Note: The below code is derived from Genesis Framework . If you are using Genesis, then you don’t need any code or plugin. We are using pagination in our custom theme. Therefore we need it.

// Pagination Starts here

function pp_pagination_nav() { if( is_singular() ) return; global $wp_query; /** Stops execution if there's only 1 page */ if( $wp_query->max_num_pages <= 1 ) return; $paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1; $max = intval( $wp_query->max_num_pages ); /** Adds current page to the array */ if ( $paged >= 1 ) $links[] = $paged; /** Add the pages around the current page to the array */ if ( $paged >= 3 ) { $links[] = $paged - 1; $links[] = $paged - 2; } if ( ( $paged + 2 ) <= $max ) { $links[] = $paged + 2; $links[] = $paged + 1; } echo '<div class=""><ul class="pagination">' . "\n"; /** Previous Post Link Function */ if ( get_previous_posts_link() ) printf( '<li>%s</li>' . "\n", get_previous_posts_link() ); /** Links to the first page, plus ellipses if necessary */ if ( ! in_array( 1, $links ) ) { $class = 1 == $paged ? ' class="active"' : ''; printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' ); if ( ! in_array( 2, $links ) ) echo '<li>…</li>'; } /** Links to current page, plus 2 pages in either direction if necessary */ sort( $links ); foreach ( (array) $links as $link ) { $class = $paged == $link ? ' class="active"' : ''; printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $link ) ), $link ); } /** Links to last page, plus ellipses if necessary */ if ( ! in_array( $max, $links ) ) { if ( ! in_array( $max - 1, $links ) ) echo '<li>…</li>' . "\n"; $class = $paged == $max ? ' class="active"' : ''; printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max ); } /** Next Post Link function */ if ( get_next_posts_link() ) printf( '<li>%s</li>' . "\n", get_next_posts_link() ); echo '</ul></div>' . "\n"; }

You can reuse the above code in different templates or for category pages as necessary. I have been following the exact same above snippets for my client’s site. You can see the [button url=”http://prabinparajuli.com.np/portfolio/” style=”red”]DEMO Here[/button].

STEP 3: Adding class to links

The above step should be enough to display Pagination on our website. But if you want to add your custom class to the Link Buttons and want to beautify, then you need to use the filter hook for next post and previous post attributes. In the code below, I am going to use Bootstrap’s Class here. Paste it just at the end of the functions.php file. Then we are good to go.

// older post class added
add_filter('next_posts_link_attributes', 'posts_link_attributes');
add_filter('previous_posts_link_attributes', 'posts_link_attributes');

function posts_link_attributes() {
return 'class="btn btn-default"';
}

DEMO SCREENSHOT (Tested)

Finally, we have accomplished our goal here. Below is the Tested Screenshot for the proof. I’ve been using this step for almost every of my client sites. So it should work.

Add Custom Pagination in WordPress

If you any query or suggestion, there is a message/comment form below. Feel free to write. 🙂