How To Customize Jetpack Infinite Scroll

We have talked in past about adding Infinite Scroll to WordPress using Jetpack’s Infinite Scroll module. In this tutorial, I’ll show you can customize Jetpack Infinite Scroll by using some predetermined parameters. It just takes a few lines of code to customize Infinite Scroll.

By default, you can add Infinite Scroll to your WordPress theme by dropping following snippet to your current theme’s functions.php file:

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

This code will give you a fully functioning Infinite Scroll, but there is more you can do with Infinite Scroll.

You can add more options to your Infinite Scroll by putting following code:

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

Let me break each parameter of the above code for you.

type

This parameter controls the behavior of your Infinite Scroll. There are two different styles of Infinite Scroll – scroll or click. By default, Infinite Scroll uses the scroll option to load more posts when the visitor approaches the bottom. While click option shows a Load more posts button.

footer_widgets

This parameter indicates whether or not a theme has footer widgets. If your theme has footer widgets, it will set the scroll type to click. You can use true or false value in this option.

footer

One of the most frustrated issues with Infinite Scroll is that you can’s access the footer of your website after activating it. To fix this issue, Infinite Scroll comes with a fixed footer that slides in once you scroll the page down. This parameter helps you to match the footer width with your theme design. You pass an ID to match its width. To remove the footer, you can pass a false value.

container

This parameter is the core of adding Infinite Scroll to your theme. This parameters specifies the ID of HTML element where Infinite Scroll should load additional posts to. For the most themes, it will be content, but make sure to check your theme if it doesn’t work.

wrapper

This argument determines whether or not each set of additional posts which loads with Infinite Scroll is contained within a <div>. If true, it will be wrapped inside <div> element with infinite-wrap class.

render

This argument is used when your theme doesn’t contains standard template parts in the content-{post format}.php form. You can leave this parameter if you’re using a standard WordPress theme. If not, a function name should be specified for the render argument.

posts_per_page

By default, Infinite Scroll loads  seven (7) posts for the scroll type, but you can change the number of posts by using this parameter. For the click type, you can change posts number directly from Settings > Reading option.

For more customization, you can head to Infinite Scroll module’s Jetpack page.