Infinite scroll on the blog page
-
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]
- The topic ‘Infinite scroll on the blog page’ is closed to new replies.