WordPress Infinite Scroll without using any plugin

by

Background information can be skipped.

I wanted to use the infinite scrolling option on my WordPress theme, but I am not well trained in Javascript so I tried this solution:

Add Infinite Scroll to a WordPress Theme

function custom_infinite_scroll_js() {
    //Code as given in the link above
}
add_action( 'wp_footer', 'custom_infinite_scroll_js', 100 );

I wasted my couple of days at the above-mentioned article and later realized that everything is outdated and even the JS by metafizzy has been updated.

Challenges faced were:

img: The path to the ajax loader image
nextSelector: Selector for the “previous posts” link.
navSelector: Containing selector for the previous/next navigation links.
itemSelector: Selector for posts. This might be .hentry, .post, .etc
contentSelector: Containing div for your posts.
  1. Could not understand how to find these selectors in my theme.
  2. some bugs in V2

Decided to use V3 and move on to the lastest version of the infinite scroll

V2 has been updated to V3
The details can be found here.

https://infinite-scroll.com/extras.html#v2-upgrade-example

I created a function like this →

function custom_infinite_scroll_js() {
if ( ! is_singular() ) { ?>
<script>
    var $container = $('.container').infiniteScroll({
    append: '.post',
    path: '.pagination__next',
    status: '.page-load-status',
    });

    // use event for v2 callback
    $container.on( 'append.infiniteScroll', function( event, response, path, items ) {
    $( items ).tooltip();
    });
</script>
<?php
}
}
add_action( 'wp_footer', 'custom_infinite_scroll_js', 100 );

But it doesn’t actually create an infinite scroll. Can someone guide me how to proceed.

1 Answer
1

For single article infinite scroll below is the solution

single.php

<div class="blog-article-section"> 
<?php while( have_posts() ): ?>   
<div class="blog-article">
  <?php if( have_posts() ): the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <p><?php the_content(); ?></p>
  <?php endif;  ?>
  <div class="pagination-single" >
    <div class="next_post_link"><?php previous_post_link( '%link','Previous Post' ) ?></div>
    <div class="previous_post_link"><?php next_post_link( '%link','Next Post' ) ?></div>
  </div>
</div>
<?php endwhile; ?>
</div>
<div class="blog-article1"></div>
<a href="#" class="loadArticle">Load more</a>

script.js

(function($) {
$(document).ready(function(){
    var next_count = 1;
    $('.next_post_link a').attr("id", "next"+next_count);
    var prev_count = 1;
    $('.prev_post_link a').attr("id", "prev"+prev_count);
    $(".loadArticle").click(function(e) {
        e.preventDefault();
        loadNextArticle();
    });
    $(window).scroll(function(){
        loadNextArticle();
        console.log('scroll')
    });
    function loadNextArticle(){
        var next_link = $("#next"+next_count).attr("href");
        var prev_link = $("#prev"+prev_count).attr("href");
         if(typeof(next_link) != "undefined"){
            $.ajax({
              type: "GET",
              url: next_link,
              data: {},
              async: false,
              success: function(data){
                next_count = ++next_count;
                var result = $(data);
                $('.next_post_link a', result).attr("id","next"+next_count);
                result.find('.blog-article').appendTo('.blog-article1').fadeIn('slow');
              }
            });
        } 
    }
});
}(jQuery));

Leave a Comment