How to Add custom Pagination in Custom Theme in WordPress
In the vast world of WordPress, pagination can be a double-edged sword. While it’s often essential for page load times and user experience, it can also be a tad annoying. This is especially true when it comes to ads, and it can even impact SEO. Today, let’s explore the art of adding custom pagination to your WordPress site for a seamless user experience.
Step 1: Add Pagination in Your Blog Template
In your theme’s file (index.php or blog-template.php), insert the following code where necessary:
<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>This code uses the pp_pagination_nav() function to link different split posts.
Step 2: Add Code in functions.php
function pp_pagination_nav() {
if( is_singular() )
return;
global $wp_query;
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 );
if ( $paged >= 1 )
$links[] = $paged;
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";
if ( get_previous_posts_link() )
printf( '<li>%s</li>' . "\n", get_previous_posts_link() );
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>';
}
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 );
}
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 );
}
if ( get_next_posts_link() )
printf( '<li>%s</li>' . "\n", get_next_posts_link() );
echo '</ul></div>' . "\n";
}
This function handles the pagination links and adds them to your custom template.
Step 3: Add Class to Links (Optional)
To add custom classes to the link buttons, use the following code at the end of functions.php:
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"';
}This example adds Bootstrap’s “btn” and “btn-default” classes to the link buttons.
Conclusion: Enjoy Customized Pagination!
And there you have it! You’ve successfully added custom pagination to your WordPress site. You can reuse this code in different templates or for category pages as needed. If you have questions or face any issues, drop a comment below. If this guide added a touch of magic to your WordPress journey, hit that Share button!
