1. Home
  2. /
  3. Web Design & Development
  4. /
  5. WordPress
  6. /
  7. How to Implement Infinite Pagination in WordPress? Easy way to add Pagination with Infinite Scroll.

How to Implement Infinite Pagination in WordPress? Easy way to add Pagination with Infinite Scroll.

WordPress Pagination with Infinite Scroll

Introduction

Want to change your traditional website pagination with Infinite Scroll? Today, we’re going to see how exactly it can be implmeneted with ease.

Well, sometimes we want our users to present the content without getting them redirected to another page or keep loading (in other words, displaying) articles, blog posts or products without any need of a click i.e. by just using a mouse scroll or page/window scroll. In such cases, Infinite Scroll approach is very useful.

Through Infinite Scroll approach, we make Asynchronous (Ajax/jQuery) requests to web server on window scroll (i.e. scrolling of mouse down the page) and fetch new content and append the received data on the dom/page. This request process is repeated until we have fetched and displayed all data available. And, once it is done, the footer part of the website or webpage is displayed.

In this article, we have provided all the needful resources in order to implement this on your own website.

How to Implement Infinite Scroll on a WordPress Website?

Well, to do so, we need to understand the basic working of HTML, CSS, jQuery/JavaScript and WordPress/PHP.

Here in this example, we are changing our Archive page or listing page’s pagination from default i.e. paginated numbers to infinite scroll.

1. HTML Script for archive.php

You can also add this to any page template instead of archive.php.

<!-- outer container. Here, we have listing-section class selector in use -->
<div class="article-list" is="listing-section">
    <!-- Here, in this container the fetched articles will be appended -->
    <div id="articlelistings" style="display:none;"></div>
    <!-- Show, the user "loading..." text or image with animated loading graphics -->
    <div class="row" style="text-align: center;">
           <img src="loader.gif' ?>" id="loader" alt="loader" style="display:none">
           <div id="pagination"> 
	       <div class="-align-center">
		<a href="javascript:void(0)"id="loadMore" class="btn btn--bordered btn--large" data-val="false" style="display:none;">Load More</a>
		</div>
           </div>
    </div>
</div>

2. JQuery/Javascript for Archive.php

<script>  
jQuery(document).ready(function(){
	var page = 1;
	var filters ={};
	filters['post_type'] = 'post';
        /*use below if you have category filters on the page*/
	<?php if(isset($current_term_id)){ ?>
	filters['category_id'] = '<?php echo $current_term_id ?>';
	<?php } ?>
	
        /*use below if this is an authors page*/
	<?php if( is_author() ){ ?>
	filters['author_id'] = '<?php echo get_the_author_meta( 'ID' ); ?>';	
	<?php } ?>
	
	var ajaxUrl = '<?php echo admin_url('admin-ajax.php'); ?>';
	loadArticleListing(page,ajaxUrl,filters);
	
	var listingAjaxSent = '';

	jQuery(window).on("scroll", function() {
		if(jQuery(window).scrollTop() + jQuery(window).height() > jQuery(document).height() - 700) {

			jQuery('#listing-section').addClass('listing-ajax');
			listingAjaxSent = jQuery('#loadMore').attr('data-val');
			if(listingAjaxSent == 'false'){
				page++;					
				listingAjaxSent = true;
				loadArticleListing(page,ajaxUrl,filters);
			}
			jQuery('#loadMore').attr('data-val','true');
		}
	});
	
	jQuery('#loadMore').click(function(){
		jQuery('#listing-section').addClass('listing-ajax');
		listingAjaxSent = jQuery(this).data('data-val');
		if(!listingAjaxSent){			
			page++;					
			listingAjaxSent = true;
			loadArticleListing(page,ajaxUrl,filters);
		}
	});
});	
</script>

3. jQuery/Javascript to make Aynchronous POST or GET Request to the server

You can add this script on the same page or add it inside any javascript file and call it on the same page.


<script>
var paginationLimit = 12;

function loadArticleListing(page,ajaxUrl,filters){
	jQuery('#loader').show();
	var limit = paginationLimit;

	jQuery.ajax({
		url: ajaxUrl,
		type: "POST",
		data:{'action':'load_article_listings','page':page,'filters':filters},
		success: function(html)
		{
		jQuery('#loader').hide();
		
			if(html)
			{

				jQuery("#loadMore").css("pointer-events", "auto");
				var data = jQuery.parseJSON(html);				
				if(data.load_content == true){
					if(data.content == null || data.content == ''){
						jQuery('#loadMore').attr('data-val','true');
						return false;
					}
					
					jQuery('#articlelistings').append(data.content);
					jQuery('#loadMore').attr('data-val','false');	
					jQuery('#articlelistings').append(data.contentScript).show('slow');;
					
				}else{					
					jQuery('#articlelistings').html(data.content);
					jQuery('#articlelistings').append(data.contentScript).show('slow');;					
				}

				jQuery('#listing-section').removeClass('listing-ajax');
				
			}
			
		}
		
	});
}
</script>

4. Add this script in your themes functions.php file

The below piece of code, handles the request sent from the client end and responds with fetched data or error in case of any issues.

<?php 
function getCallArgs($limit,$page,$filters){

	$post_type = isset($filters['post_type']) ? $filters['post_type'] : 'post';
	
	$args = array(
		'post_type' => $post_type,
		'posts_per_page' => $limit,
		'post_status' => 'publish'
	);

	if($page){
		$sortingPaged = array(
			'paged' => $page,
		);

		$args = array_merge($args,$sortingPaged);
	}


	$category_id = isset($filters['category_id']) ? intval( $filters['category_id'] ) : 0;
	$author_id = isset($filters['author_id']) ? intval( $filters['author_id'] ) : 0;

	if( $author_id > 0 ){
		$args['author'] = $author_id;
	}

	if($category_id>0){
		$taxonomy['category__in'] = $category_id;
		$args = array_merge($args,$taxonomy);
	}

	return $args;
}

function load_article_listings(){
	global $wpdb;
	$POST = $_POST;

	$filters = $POST['filters'];

	$page = $POST['page'];

	$default_posts_per_page = 12;

	$limit = $default_posts_per_page;

	
	$args = getCallArgs($limit,$page,$filters);
	
	$post_query = new WP_Query($args);


	$count_total = $post_query->post_count;

	$i=0;

	$liContent = '';
	
	while($post_query->have_posts()){
		$post_query->the_post();
		
		ob_start();
		
		get_template_part( 'template-parts/content', 'excerpt' );
		
		$liContent.=ob_get_clean();

		$i++;
	}

	wp_reset_query();

	if($page > 1){
		echo json_encode(array('content'=>utf8_encode($liContent),'result'=>true,'load_content'=>true,'count'=>$count_total));
	}else{
		if(empty($liContent)){
			$liContent = '<div class="no--result">You have reached the end.</div>';
			$is_content = false;
		}else{
			$liContent = $liContent;
			$is_content = true;
		}

		echo json_encode(array('content'=>utf8_encode($liContent),'result'=>true,'load_content'=>false,'count'=>$count_total,'is_content'=>$is_content));
	}

	exit;
}
add_action( 'wp_ajax_load_article_listings', 'load_article_listings');
add_action( 'wp_ajax_nopriv_load_article_listings', 'load_article_listings');
		
	
?>

Once copied properly, ensure you have proper WordPress PHP files to get the article content ready for display in template-parts/content.

5. CSS (optional)

Add this below css for small screens.

<style>
@media only screen and (max-width: 900px){
	.article-list{min-height: 100vh;}
}
</style>

Reviews & Ratings Get your stoe online with Shopify in 60 minutes Shop Now