Infinite Scroll

Add infinite scroll to WordPress

Rules

• Only works on the blog homepage.
• Adds a button to initiate the scroll.
• Displays a page number each time a new bunch of posts are loaded.

Theme Integration

Toolbelt Infinite Scroll works in the same way as Jetpack Infinite Scroll. Since Jetpack used a non-prefixed name I have decided to use the same name. This means that themes that support Jetpack Infinite Scroll should 'just work'.

That said, Toolbelt only requires the 'render' parameter to work. The other settings will be ignored, but can be safely left in so that you can easily switch between plugins.

To add support to your theme you should:

1. Add theme support

function my_infinite_scroll_support() {
    add_theme_support(
        'toolbelt-infinite-scroll',
        array(
            'render' => 'my_infinite_scroll_render',
        )
    );
}

add_action( 'after_setup_theme', 'my_infinite_scroll_support' );

2. Add the render function

For the infinite scroll to render properly it needs a render function. In the example above I have named it my_infinite_scroll_render, but you can use whatever name makes most sense to you.

If the render parameter is not included then it will try to use the same format as shown below. An external callback is used so that you can reuse your theme template parts, and place them wherever you need.

function my_infinite_scroll_render() {
    while ( have_posts() ) {
        the_post();
        get_template_part( 'content', 'format-' . get_post_format() );

    }
}

3. Ensure the module is active

Remember that adding theme support alone is not enough. If the module is not enabled in the settings then it won't work!

Customization

The default styles are quite simple however there are a few small bits of CSS we can use to tweak things.

Center 'load more' button and spinner

.toolbelt-infinite-scroll .toolbelt-infinite-scroll-wrapper { text-align: center; }

Change spinner colour

The spinner uses the currentColor by default. In most cases this means the spinner will use the text colour. If you want to edit it directly you can use the following CSS:

.toolbelt-infinite-scroll .toolbelt-spinner {
    border-top-color: red;
    border-bottom-color: red;
}

Hide page numbers

.toolbelt-divider { display: none; }

FAQ

Where is the load more button?

By default the load more button is attached to the the_posts_pagination function. If your theme does not use this then you will need to add support in another way. The simplest method is to output the load more button yourself.

To do this you should add the following code in your index.php template directly after the post loop.

The posts will be inserted before the button so make sure the post is inside any containing html elements.

if ( is_home() ) {
    echo toolbelt_is_button();
}

How do I make it work with Masonry?

Once the posts load Toolbelt dispatches a post-load event which you can listen for with jQuery and then rearrange your Masonry content.