Infinite Scroll not working in own theme

I’m developing my own theme and added this in a function which is called with the hook after_setup_theme to support infinite scroll:

add_theme_support( 'infinite-scroll', array(
    'container'  => 'content',
    'footer' => false,
    'wrapper' => false
) );

I got this from http://jetpack.me/support/infinite-scroll/. content is the id of the container the new posts should go in. footer is set to false since I don’t want another footer to be added. wrapper is set to false because I don’t need a div wrapper.

Read More

When I go to my webpage and scroll to the bottom, there is a loading anymation, but there are no posts loaded (there are more posts though). I see that there is a javascript error:

TypeError: infiniteScroll.scroller is undefined at infinity.js:485

I also see there is an ajax request when I scroll to the bottom, but that page returns:

{"type":"empty"}

What am I doing wrong? How can I get this working?

Related posts

Leave a Reply

2 comments

  1. You need either a content.php or content-<post format>.php OR use a render:

    add_theme_support( 'infinite-scroll', array(
        'container'  => 'content',
        'footer' => false,
        'render' => 'render_function',
        'wrapper' => false
    ) );
    
    function render_function() {
        get_template_part('loop');
    }
    

    This implies you have a loop.php.

  2. Most likely, your theme is missing either the wp_head() call in the header.php (add it right before the </head>), or the wp_footer() call in the footer.php (add it right before the </body>).