Support » Plugin: Jetpack by WordPress.com » Can't get infinite scroll to work

  • Resolved mike.chiv

    (@mikechiv)


    I’ve been struggling to implement infinite scroll for days now, and it’s just not happening for me.

    I am using a custom WP_Query as shown here:

    <div id="blog-posts">
    				<?php
    				$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
    				$args = array(
    					'post_type' => 'post',
    					'posts_per_page' => 5,
    					'paged' => $paged
    				);
    				$post_query = new WP_Query($args);
    				if( $post_query->have_posts() ) : while( $post_query->have_posts() ) : $post_query->the_post(); 
    
    					get_template_part('entry');				
    
    				endwhile; endif; ?>
    				<?php if( $post_query->max_num_pages > 1 ) {
    					previous_posts_link('&laquo; Newer posts');
    	    			next_posts_link( 'Older posts &raquo;', $post_query->max_num_pages );
    	    		}
        			wp_reset_postdata(); ?>
    			</div>

    entry.php contains my loop. If required I will post that, but as it’s a little longer and may not be required, I’ve omitted it.

    Here is my theme support code from functions.php:

    add_theme_support( 'infinite-scroll', array(
        'type'           => 'scroll',
        'footer'         => false,
        'footer_widgets' => false,
        'container'      => 'blog-posts',
        'wrapper'        => true,
        'posts_per_page' => false
    ) );

    “To infinity and beyond” is ticked in the reading settings.

    Is there something I have missed? I’m really stuck on this one, and I haven’t been able to find a solution online.

    https://wordpress.org/plugins/jetpack/

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    I’d suggest placing your custom loop in a new function, and refer that function in the render parameter when declaring Infinite Scroll support.

    You can read more about it here:
    http://jetpack.me/support/infinite-scroll/

    I hope this helps.

    Hi Jeremy,

    Thanks for your reply. I tried this already. I’ll give it another go just in case I did it wrong, though. If it doesn’t work I’ll post what I added for you to assess.

    Mike

    Okay I tried a couple of variations for render:

    function infinite_scroll_render(){
    
    while( $post_query->have_posts() ) : $post_query->the_post();
    	get_template_part('entry');
    endwhile;
    
    }

    and:

    function infinite_scroll_render(){
    
    get_template_part('entry');
    
    }

    Neither worked. I’m not sure if this is because I am using a custom loop…tbh, I have no clue what to try to fix it!

    Mike

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    The Render function should include all the parameters of your custom query for it to work.

    In your original post, you posted a full custom query. I’d recommend using the whole query inside the render function.

    Let me know how it goes.

    Okay I tried adding the whole custom query to no avail.

    Here is my full code in functions.php:

    function infinite_scroll_render() {
    	$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
    	$args = array(
    		'post_type' => 'post',
    		'posts_per_page' => 5,
    		'paged' => $paged
    	);
    	$post_query = new WP_Query($args);
    	if( $post_query->have_posts() ) : while( $post_query->have_posts() ) : $post_query->the_post(); 
    
    		get_template_part('entry');				
    
    	endwhile; endif;
    }
    
    add_theme_support( 'infinite-scroll', array(
        'type'           => 'scroll',
        'footer'         => false,
        'footer_widgets' => false,
        'container'      => 'blog-posts',
        'wrapper'        => true,
        'posts_per_page' => false,
        'render'         => 'infinite_scroll_render'
    ) );

    I still have the working “older posts” link, but infinite scroll does not kick in.

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    Since your custom query only modifies the number of posts you want to display on every page (5), how about using a regular loop and only changing the posts_per_page parameter in add_theme_support( 'infinite-scroll', array() ) to 5?

    Okay so now I have this in functions.php:

    function infinite_scroll_render() {
    	$args = array(
    		'post_type' => 'post',
    	);
    	$post_query = new WP_Query($args);
    	if( $post_query->have_posts() ) : while( $post_query->have_posts() ) : $post_query->the_post(); 
    
    		get_template_part('entry');				
    
    	endwhile; endif;
    }
    
    add_theme_support( 'infinite-scroll', array(
        'type'           => 'scroll',
        'footer'         => false,
        'footer_widgets' => false,
        'container'      => 'blog-posts',
        'wrapper'        => true,
        'posts_per_page' => 5,
        'render'         => 'infinite_scroll_render'
    ) );

    And this in my blog template:

    $args = array(
    					'post_type' => 'post',
    				);
    				$post_query = new WP_Query($args);
    				if( $post_query->have_posts() ) : while( $post_query->have_posts() ) : $post_query->the_post(); 
    
    					get_template_part('entry');				
    
    				endwhile; endif; ?>
    				<?php if( $post_query->max_num_pages > 1 ) {
    					previous_posts_link('&laquo; Newer posts');
    	    			next_posts_link( 'Older posts &raquo;', $post_query->max_num_pages );
    	    		}
        			wp_reset_postdata();

    Instead of using the parameter for posts_per_page set in functions.php for infinite-scroll theme support, the blog page is now using my theme’s set value for posts_per_page, and infinite scroll is still not loading new posts.

    I have tried using the standard loop, but for some reason this only outputs the current page (blog.php) rather than all of my posts.

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    Would you mind contacting us via this contact form, and mentioning this thread? I’d like to run some more tests with your theme on one of my test sites.

    Thanks!

    Done. I await your reply.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Can't get infinite scroll to work’ is closed to new replies.