Can’t get Jetpack Infinite Scroll working in custom WordPress theme

I’m making a custom WordPress site for a client in which I would like to implement Infinite Scrolling to my archive and category templates.

I’m using the following to achieve that:

Read More
  • HTML5Blank WordPress Framework
  • Jetpack WordPress Plugin
  • Bootstrap 3

I’ve read several posts and tutorials over the Internet explaining how to implement that functionality, everything seems super straightforward but for any reason I’m not being able to make it to work.

The plugin is activated, and also activated the Infinite Scroll module of it.

I’m following the instructions as written here: http://ottopress.com/2012/jetpack-and-the-infinite-scroll/

I have the following piece of code in my category.php (where I’m making all of my tests), please note that everything is wrapped in a div with the id “content”:

<div id="content">
<?php if ( have_posts() ) : ?>

    <?php
    // Start the Loop.
    while ( have_posts() ) : the_post();

        get_template_part( 'content', 'category' );

    // End the loop.
    endwhile;

    // If no content, include the "No posts found" template.
    else :
        get_template_part( 'content', 'none' );

    endif;
    ?>
</div>

Then I created a content-category.php file where I have my actual posts markup (nothing out of this world here):

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <!-- row -->
    <div class="row">
        <div class="col-xs-12 col-sm-6">
        <!-- post thumbnail -->
        <?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
            <div class="thumb">
                <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                    <div class="icono-redondo-negro">
                    <?php
                        $format = get_post_format();
                        if ( false === $format ) :
                    ?>
                        <i class="fa fa-file-text"></i>
                    <?php endif; ?>
                    <?php if ( has_post_format( 'gallery' )) : ?>
                        <i class="fa fa-picture-o"></i>
                    <?php elseif ( has_post_format( 'video' )) : ?>
                        <i class="fa fa-video-camera"></i>
                    <?php elseif ( has_post_format( 'audio' )) : ?>
                        <i class="fa fa-headphones"></i>
                    <?php endif; ?>
                    </div>
                    <?php the_post_thumbnail('categoria-thumb'); ?>
                    <span class="plus">+</span>
                </a>
            </div>
        <?php endif; ?>
        <!-- /post thumbnail -->
        </div>
        <div class="col-xs-12 col-sm-6">
            <p class="fecha"><?php the_time('j de F, Y'); ?> | <?php the_time('g:i a'); ?></p>
            <!-- post title -->
            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                <h1 class="titulo"><?php the_title(); ?></h1>
            </a>
            <!-- /post title -->
            <!-- post excerpt -->
            <p><?php html5wp_excerpt('html5wp_index'); // Build your custom callback length in functions.php ?></p>
            <!-- /post excerpt -->
            <?php edit_post_link(); ?>
        </div>
    </div>
    <!-- /row -->
</article>

Everything shows ok in the frontend, the tricky part comes next, when I actually add the Infinite Scrolling support to my theme via functions.php:

function raramuri_infinite_scroll_init() {
    add_theme_support( 'infinite-scroll', array(
        'container' => 'content',
        'type' => 'click',
        'footer' => false,
    ));
}
add_action('init', 'raramuri_infinite_scroll_init');

I have tried several things such as:

  • Adding the ‘render’ parameter, and trying to load the template part
    get_template_part( ‘content’, ‘category’ );
  • Using both “click” and “scroll” in the ‘type’ parameter
  • Adding the Infinite Scroll support via a custom function (just the
    way I did above) and also by just adding add_theme_support in the
    functions block of my functions.php
  • Tried pretty much every custom parameter of the Infinite Scroll
    function (trial and error)

By this point nothing have worked, I don’t see a “loading gif icon” when scrolling down nor a “Show more posts” button when using the click version.

I think it may be some incompatibility with HTML5Blank or I’m not implementing the infinite scroll support the right way.

I would like to have the “Show more posts” button so that the users could load more most as they wish.

Am I missing something? Thanks in advance for your help!

Related posts