Add Theme Support For JetPack Infinite Scroll

WordPress, as CMS, let’s you add as many feature as you need for your site via either the theme or plugin. And most of the feature will not be able to add within the theme and hence, plugin is probably the best option to add many features for your site. And one of the plugin for adding many features for your site is JetPack, which is developed by Automattic, the company behind WordPress. It provides you with many features such as Site Stats, Widget Visibility, CPT’s, etc. And one of it is infinite scroll which enables you to display the lists of posts in your site in same page. And here we will about adding theme support for JetPack Infinite Scroll, shall we?

What is JetPack plugin?

JetPack is the one of the WordPress plugin, which have many of the features built within it. It is developed by Automattic, the company behind WordPress as stated earlier. Some of the features which includes in this plugin are: Site Stats, Lazy Load, Custom Post Types, XML Sitemaps, and so on.

And it also includes the infinite scroll feature within it, which enables you to see the post added in your site without visiting the next/previous page for your site. And here, we will learn about how to add theme support for JetPack infinite scroll, shall we? Let’s move ahead and learn about how to do same for your site.

How to add theme support for JetPack Infinite Scroll feature?

Now, knowing the small piece of information on JetPack plugin, now let’s move ahead and learn on adding theme support for JetPack infinite scroll feature, shall we?

So for this. you need to first of all add theme support, from which JetPack will detect that the current theme will support it and then enables you to enable infinite scroll for your site. Hence, let’s move ahead and add theme support for JetPack infinite scroll.

You should already know that where the theme support for custom feature resides as within our previous article. If you do not know then, it will reside in functions.php file of the theme. And the hook for this will reside for after_setup_theme.

Now, after knowing this, let’s create theme support for same. For this, you need to add the below PHP code in the functions.php file of the theme. So, let’s do the same:

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

Here, we have passed the value for default WordPress theme like Twenty Twelve. After that is applied, that theme will support it out of the box. However, if you are building up the custom theme then, the design and implementation for those are quite different. Well for that too, you are got covered up. JetPack has provided you with many options to make your theme compatible with it. And below, is the default values for same feature, which you need to modify as needed:

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

Breakdown for adding theme support for JetPack infinite scroll

You can see that there are many values being passed for supporting the JetPack infinite scroll feature. And here, below we will explain on each of those:

1. type: It is the option for about what type is the infinite scroll is. It accepts two values, ie, scroll or click. If it is scroll, new posts will get loaded automatically when the users scrolls past last post and on click, the posts is appeared on click event.
2. footer_widgets: It will indicate that the current theme has footer widgets or not. It accepts true or false value, which helps you to show the footer or not to show it.
3. container: It is the main part for the theme, from which the infinite scroll can occur. It specifies the id of the HTML element in which the additional posts for your site will be added to. And it should only be id, classes is not accepted and it is usually the parent container of the posts in your theme.
4. wrapper: This argument determines whether or not each set of additional posts for your theme will be contained within a div element or not.
5. render: It will display the posts loop for the infinite scroll. It should contain the WordPress loop to display those for your site.
6. posts_per_page: It will let you set the posts per page for infinite scroll about how many post to load on each infinite scroll for your site.

So, if you need custom functionality for same then, you can try the below PHP code in the functions.php file of the theme:

function theme_slug_jetpack_setup() {
    add_theme_support( 'infinite-scroll', array(
        'container' => 'main',
        'render'    => 'theme_slug_infinite_scroll_render',
        'footer'    => 'page',
        'wrapper'   => false,
        'type'      => 'click',
    ) );
}

add_action('after_setup_theme', 'theme_slug_jetpack_setup');

function theme_slug_infinite_scroll_render() {
    while (have_posts()) {
        the_post();
        get_template_part('template-parts/content', get_post_format());
    }
}

Here, in the above code, you can see we have overwritten each and every values for JetPack infinite scroll feature. Now, you can see the theme support for JetPack infinite scroll has got changed differently than the default ones. Now, let’s move ahead and see the output for same, shall we?

Output of adding theme support for JetPack Infinite Scroll feature

Now, if you have followed up this tutorial properly and have implemented the JetPack infinite scroll feature for your theme then, you will probably see the output as below for your site too:

There in the above screenshot, you can see before the JetPack infinite scroll feature addition, there is pagination and after that feature is enabled, you can see the button for loading next posts is should up. From that, you can say it is successfully implemented for your built in WordPress theme.

You may also want to read:

1. XML Sitemap Support For Custom Post Type Using JetPack
2. Make YouTube And Vimeo Video Responsive In WordPress
3. Display Different Widgets Per Different Pages
4. How To Implement Yoast SEO Breadcrumb In Your Theme?
5. Change Thumbnail Image Gallery Size In WordPress

Conclusion

If you have followed up the tutorial properly and now can add theme support for JetPack infinite scroll feature within your WordPress theme with ease then, we can say that you are now more familiar on this than before. However, if you are still confused on the same and want to know more about it then, do drop the comment below in the comment box and we will follow it up.