Customize Infinite Scroll with a child theme
Many of our themes include support for Infinite Scroll via the Jetpack plugin. Infinite Scroll enables your visitors to load more posts without having to leave the page.
There are actually several Infinite Scroll style scripts out there. The reason we use the one bundled with Jetpack is because it’s tailored for use with themes, and is generally pretty easy to setup and customize. In many of our themes, you’ll find a jetpack.php file which defines the settings for how various Jetpack features, such as Infinite Scroll, work in that theme. Here is an example of the Infinite Scroll function.
Override Infinite Scroll Settings
The code snippet we’re highlighting today will let you override your theme’s Infinite Scroll settings and customize to your liking. In this example, we’re going to change the post loading behavior from scroll to click using the
So easy! Your child theme will have a functions.php file, you can place this snippet at the end of that file. We’re using a child theme because we don’t want to modify the core theme files directly. When you inevitably update your theme, those modifications would be wiped out. By adding this function to a child theme, we can make changes to Infinite Scroll and they will not be affected by theme updates.
Be sure to change the
theme_ prefix on this function and filter to whatever your theme name is. If you’d like to modify another setting, simply add a new argument to the array.
For a complete list of the settings you can modify, check out the Jetpack Infinite Scroll page.
If you decide to use click-to-load instead of scroll, you may want to customize the button text from the default “Older posts.” There’s a snippet for that too!
That’s all there is to it! Hope that takes some of the pain out of working with a complex feature like Infinite Scroll.