• Matteo

    (@matteofeduzi)


    I’m trying to build an endless load for articles on my blog page.

    I’m following this guide to make it happen: https://code.tutsplus.com/tutorials/how-to-create-infinite-scroll-pagination–wp-24873

    I managed to resolve all the errors I received but now when I get to the end of the page the ajax-loader appears correctly but once it disappears it doesn’t load the subsequent posts anyway.

    The pagination works correctly and I see that if I write the URL https://example.com/blog/page/2 I am actually redirected to the next 6 articles.

    So I just can’t figure out what the problem is in my code…

    Below the various codes used.

    page-blog.php

    <div id="contenuto">
    
    wp_enqueue_script( 'scripts-blog', get_template_directory_uri() . '/js/scripts-blog.js', array ( 'jquery' ), 1.1, true);
    
    <!-- Define our WP Query Parameters -->
    <?php
    $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
    $args=array(
        'posts_per_page' => 6,
        'paged' => $paged,
        'caller_get_posts'=> 1
    );
    $query_post = new WP_Query( $args ); 
    ?>
    
    <?php while ($query_post -> have_posts()) : $query_post -> the_post(); ?>
    
        <article>Article here....</article>
    
    <?php endwhile; ?>
    
    </div>

    /js/scripts-blog.js

    jQuery(document).ready(function($) {
        var count = 2;
        $(window).scroll(function(){
            if  ($(window).scrollTop() == $(document).height() - $(window).height()){
                loadArticle(count);
                count++;
            }
        });
    
        function loadArticle(pageNumber){
            $('a#inifiniteLoader').show('fast');
            $.ajax({
                url: "https://example.com/wp-admin/admin-ajax.php",
                type:'POST',
                data: "action=infinite_scroll&page_no="+ pageNumber + '&loop_file=loop',
                success: function(html){
                    $('a#inifiniteLoader').hide('1000');
                    $("#contenuto").append(html);
                }
            });
            return false;
        }
    });

    functions.php

    function wp_infinitepaginate(){ 
        $loopFile        = $_POST['loop_file'];
        $paged           = $_POST['page_no'];
        $posts_per_page  = get_option('posts_per_page');
    
        # Load the posts
        query_posts(array('paged' => $paged )); 
        get_template_part( $loopFile );
    
        exit;
    }
    add_action('wp_ajax_infinite_scroll', 'wp_infinitepaginate');           // for logged in user
    add_action('wp_ajax_nopriv_infinite_scroll', 'wp_infinitepaginate');    // if user not logged in

    Thanks a lot to those who will help me

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘Infinite scroll on the blog page’ is closed to new replies.