Jetpack and the Infinite Scroll
Jetpack is a beautiful thing from the heavens. It has everything one could need — all them fancy WordPress.com bells and whistles and more. Infinite Scrolls, Site Stats, Related Posts, etc etc. A quick write up in functions.php and you’re on your way for Jetpack theme support.
The problem is there isn’t much documentation on Jetpack when things break. Mores specifically making the plugin work with custom themes.
I was working on a project for a client and I needed to figure out how to actually get Infinite Scroll to work. No matter how much I followed the instructions, the plugin would not fire. In 2012, WordPress contributor, Otto, wrote a pretty simple article on how to get infinite scroll to work with a custom theme. What it did not have was the ‘ Why doesn’t it fire off despite doing everything in the article ‘ solutions… and honestly, if you’re an over thinker, even the simplest solutions can go over your head.
So, here’s a full solution in getting Jetpack’s Infinite Scroll to work. This is assuming Jetpack is already installed.
First, set up theme support in functions.php
function themename_infinite_init(){
add_theme_support('infinite-scroll', array(
'container' => 'containingdivID',
'footer' => false,
));
}
add_action('after_setup_theme', 'themename_infinite_init');
As written in the support documentation, there’s various settings you can include in the array. The container option is the element that is containing the posts. So if <div id=”container”> is the div containing your posts loop, then the configuration option container would be container. The footer option contains a boolean statement that will turn the default Infinite Scroll footer on or off. It’s automatically set to true but you can also pass your own footer element ID.
Prepare the theme
After setting up functions.php, you need to then set up your theme. So, within your loop, you need add this.
get_template_part('content', get_post_format() );
This is very important. In general, WordPress will look for a file called content.php and propagate the posts within the loop. Infinite Scroll calls upon Javascript and AJAX to pull the pages so using this function will allow the plugin to render the posts each time you scroll down without having to go to a new page. If you don’t do this then you must write a function declare it in the plugin options back in functions.php. For sake of ease it’s better to do it this way. Refer to the codex to get a better idea on how that works.
But nothing works?
In theory, this is all you need to do to get Infinite Scroll to work on your page. But there’s an important piece of information that seems to always be neglected…
Jetpack is a plugin that is completely dependent on the wp_head and wp_footer actions. Even if you have wp_head in the <head> of your theme and Jetpack’s other featuers work, neglecting to put wp_footer just before </body> will not enable the plugin to load the necessary Javascript files needed to get Infinite Scroll to actually work.
Since wp_head and wp_footer are completely theme dependent, a lot of beginner WordPress theme developers don’t realize that a lot of plugins may require these actions.
Also, check and see if your pagination is correct. If your pagination is broken, Infinite Scroll can not work because it’s unable to pull the posts.
This should cover it. Hopefully this will help someone stuck out there on this!