Learn how to easily implement infinite pagination in WordPress website instead of traditional pagination. Infinite scroll loads new content dynamically as the user scrolls down the page, improving the user experience and reducing bounce rate. It can be done using a combination of JavaScript and the WordPress REST API or by using pre-built plugins like “Infinite Scroll” or “Ajax Load More”.
Table of Contents
In this article, we’re going to discuss what infinite pagination is, how you can implement infinite pagination in a WordPress website, easy ways to add pagination with infinite scroll, and the benefits & cons to implement infinite pagination in the WordPress site.
What is Infinite Pagination in WordPress?
Infinite pagination is a technique used to load new content dynamically as the user scrolls down a webpage, instead of using traditional pagination which needs the user to click on “next” or “previous” buttons. This technique is used on WordPress websites to improve the user experience by making it more seamless and efficient. It can keep users engaged with the website by making it easy for them to access more content without having to navigate away from the current page, thus reducing the bounce rate.
The infinite pagination can be achieved by using a combination of JavaScript and the WordPress REST API, which allows to retrieve the next set of posts when the user scrolls to the bottom of the page, or by using pre-built plugins, like “Infinite Scroll” or “Ajax Load More” which allows you to easily implement infinite scrolling on your website.
Related: Top 10 SEO Plugins For Your WordPress Website
Steps to Implement Infinite Pagination in 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>
Easy Ways to Add Pagination With Infinite Scroll
One easy way to add pagination with infinite scroll to a WordPress website is to use a plugin. There are several plugins available that can help you to quickly and easily add infinite scroll to your website, such as:
1. Infinite Scroll
This plugin allows you to easily add infinite scroll to your WordPress website. It uses the jQuery library to handle the infinite scrolling and can be configured to automatically load new posts as the user scrolls down the page.
2. Ajax Load More
This plugin is another popular choice for adding infinite scroll to a WordPress website. It allows you to create custom WordPress queries to load new posts, pages, and custom post types via AJAX.
3. Jetpack Infinite Scroll
This plugin is developed by WordPress.com team and it’s available for free, it allows you to easily add infinite scroll to your website by using the same technology that powers WordPress.com
These plugins typically work by automatically loading new posts as the user scrolls down the page, without requiring the user to click on a “next” button. They also have a lot of options to customize the appearance of the infinite scroll and other settings.
To add pagination with Infinite Scroll using these plugins, you will typically need to install and activate the plugin, then configure it according to your preferences. Once it’s set up, the plugin will handle the infinite scrolling functionality, and you won’t need to do any additional coding.
It’s worth noting that not all WordPress themes are compatible with these kind of plugins, so it’s always a good idea to test the plugin on a test environment before installing it on the live site.
Related: How to remove or disable comments on a WordPress website?
Benefits of Infinite Pagination in WordPress
Infinite pagination is a technique used to load new content dynamically as the user scrolls down a webpage. This can be an important feature for a WordPress website because it can help to improve the user experience by making it more seamless and efficient.
Here are some reasons why infinite pagination can be important for a WordPress website:
1. Improved user experience
Infinite pagination eliminates the need for users to click on a “next” button to view more content. This can make it more convenient for users to navigate the website, especially if the website has a large amount of content.
2. Increased engagement
Infinite pagination can help to keep users engaged with the website by making it easy for them to access more content without having to navigate away from the current page.
3. Reduced bounce rate
Bounce rate is the percentage of users who leave a website after only viewing one page. Infinite pagination can help to reduce the bounce rate by making it easy for users to access more content without having to navigate away from the website.
4. Better performance
Infinite pagination can help to improve the website’s performance by only loading new content as the user scrolls down the page. This can help to reduce the amount of data that needs to be loaded when the page first loads, which can make the website faster.
5. Mobile-friendly
Infinite pagination is a very mobile-friendly feature, it can make it more comfortable for users to view content on a mobile device because they don’t need to constantly click on “next” buttons.
In summary, infinite pagination can be an important feature for a WordPress website because it can improve the user experience, increase engagement, reduce bounce rate, improve performance, and make it more mobile-friendly.
Related: How to start with a custom wordpress theme?
Cons of Infinite Pagination in WordPress
While Infinite Pagination can be an important feature for a WordPress website, it also has some drawbacks to consider:
1. Increased load time
Infinite pagination can increase the load time of a website because it loads new content dynamically as the user scrolls down the page. This can cause the website to slow down if there’s a large amount of content.
2. Limited control over the content
Infinite pagination can make it more difficult for users to navigate to specific content on the website. For example, if a user wants to go to the third page of content, they will have to scroll through two pages of content to get there.
3. Accessibility issues
Infinite pagination can make it difficult for users with accessibility needs to navigate the website. For example, users who rely on keyboard navigation or screen readers may have difficulty using infinite pagination.
4. SEO
Infinite Pagination can affect the SEO of the website, as it can make it harder for search engines to crawl the content and it can also create duplicate content issues.
5. Maintenance
Infinite pagination can increase the maintenance required for a website, since it’s a dynamic feature that needs to be updated and maintained regularly.
6. Mobile devices
Infinite pagination can be problematic for mobile devices, especially if the internet connection is slow, as it can lead to an increased data usage and longer loading times.
Finally, Infinite pagination can be a useful feature for a WordPress website. However, it also has some drawbacks such as increased load time, limited control over the content, accessibility issues, SEO issues, maintenance, and mobile devices compatibility. It’s important to consider these drawbacks before implementing infinite pagination on a website.
Related: Top 5 useful WordPress plugins for your website
Conclusion
In conclusion, Infinite Pagination is a useful technique for loading new content dynamically as the user scrolls down a webpage. It can improve the user experience, increase engagement, reduce bounce rate, and make a website more mobile-friendly. However, it also has some drawbacks, such as increased load time, limited control over the content, accessibility issues, SEO issues, maintenance, and mobile devices compatibility.
Implementing Infinite Pagination in WordPress can be done by using a combination of JavaScript and the WordPress REST API or by using a pre-built plugin like “Infinite Scroll” or “Ajax Load More”. These plugins can help you to quickly and easily add infinite scroll to your website, without requiring any additional coding.
Also know about: Add Custom Class to WordPress Widgets
It’s important to weigh the benefits and drawbacks of Infinite Pagination before implementing it on a WordPress website. Also, testing the plugin on a test environment is crucial before installing it on the live site. It’s because not all WordPress themes are compatible with these kind of plugins. Moreover, you may need the assistance of a developer if you’re not comfortable with JavaScript and the WordPress REST API.
