I am trying to use infinite scroll with my wordpress theme but it does not work

Question

Thanks for your time to help me out.

I have a wordpress website: http://techchef.org/bridco/ , in this website i am using wordpress 3.8.1; in the theme i want to use infinite scrolling; i try to use different plugin, like wp_infinitescroll , scrolling plugin; none of that work so i try to use a custom way to make it done.

So i use the steps mentioned in the tutorial here http://code.tutsplus.com/tutorials/how-to-create-infinite-scroll-pagination--wp-24873 ;

however i am not sure but it looks there is small change which required in wordpress 3.8.1, mentioned below,

in old wordpress version for query post we used query_posts(array('paged' => $paged, 'post_status' => 'publish'));

in new wordpress version for query post we used query_posts(array('page' => $paged, 'post_status' => 'publish'));

instead of "paged" we use "page"

i tried that but it does not work too, so i turned back that to the original one "paged"

For Infinite Scroll I use

for infinite i use the below mentioned code

In function.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, 'post_status' => 'publish'));
    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

In header.php i used

<script type="text/javascript">
function loadArticle(pageNumber) {
    jQuery.ajax({
        url: "<?php bloginfo('wpurl') ?>/wp-admin/admin-ajax.php",
        type:'POST',
        data: "action=infinite_scroll&page_no="+ pageNumber + '&loop_file=loop', 
        success: function(html){
            jQuery("#main .container").append(html);    // This will be the div where our content will be loaded
        }
    });
    return false;
}
</script>


<script type="text/javascript">
            jQuery(window).scroll(function(){
                    if  (jQuery(window).scrollTop() == jQuery(document).height() - jQuery(window).height()){
                          // run our call for pagination
                    }
            }); 
</script>

But it does not work, please help, guide me what i am doing wrong in it, or what is missing, even it is not showing any js error, but i found here it gives 0 value http://techchef.org/bridco/wp-admin/admin-ajax.php

Answer 1

i have solved that by changing a function of loop in function.php as per my theme i have mentioned below: more over i have changed get_query_var('paged') with get_query_var('page')

Load the posts

     $loop_paged = (get_query_var('page')) ? get_query_var('page') : $paged;
     query_posts('orderby=date&order=ASC&paged=' . $loop_paged);

                            if ( have_posts() ) :
                                while ( have_posts() ) : the_post(); 
                                    get_template_part( 'content', get_post_format() );
                                endwhile; 
                                echo '</ul></div>
                                <div style="clear: both"></div>';
                                                       endif; 

Answer 2

You have miss part of js to call loadArticle and which pageNumber to load

   var count = 2;//for first load
        $(window).scroll(function(){
                if  ($(window).scrollTop() == $(document).height() - $(window).height()){
                   loadArticle(count);
                   count++;
                }
        });