Our last couple of blog posts featured the JetPack Infinite Scroll (IS) module. Here we show you how to integrate the code into a Genesis child theme.
If you haven’t read them already, you may want to read up on…
When it comes to themes, the Genesis framework does things a little differently and that also goes for integrating the JetPack Infinite Scroll module.
The Zero Point Development website runs on top of Genesis so you can see the IS in action on our home page.
Genesis Child Themes and The Loop
To understand how to link IS into a Genesis child theme, you need to understand how Genesis generates the posts lists in the loop.
You may have heard of “the loop” in WordPress. This is the cyclic process where WordPress looks up all the posts it needs to process and display.
Genesis has something similar called genesis_do_loop() and it is this function that we need to link into the IS module.
Integrating Infinite Scroll with the Genesis Loop
This is almost the same code as the standard way to integrate IS into a theme, with a couple of changes.
Add this code to your theme’s functions.php file.
[gist id=666f8771117e987cbb6d file=code-snippet-1.php]
Lines 4-10
defines a function zpd_infinite_scroll_init() in which we add IS support to the theme
Line 8
sets up the render argument and points it to the genesis_do_loop() function which controls the output of posts.
Line 11
adds an action to link your new function zpd_infinite_scroll_init() to the Genesis after_setup_theme() function which gets called once the main files of your Genesis Child Theme have been processed.
Simple as.
Update for Genesis 2.0
Genesis 2.0 has the option of using HTML5 theme support.
In doing this, DIV id’s are replaced with HTML elements.
“Container” is now the HTML 5 element called “Main” and by default has no id attribute.
You need to use the genesis_attr_ filter to add an id attribute onto the main element.
So to get the infinite scroll working in Genesis 2.0 with HTML 5 support, use the following:
[gist id=666f8771117e987cbb6d file=code-snippet-2.php]
13 Responses
Thank you! I was stuck on this for a while until I found your post. It was the “render” option that I was missing. I kept getting an empty response from the XHR call.
Great info! But I just wonder if there is a proper way on how to hide the navigation/pagination when IS is activated rather than adding display:none?
Does this work for Genesis 2.1 please?
Sorry for the late reply Marc.
I’ve added the code you need to get it working with Genesis 2.x.
Just replace “content” with “main”. See post for more details.
Wil.
Does this still work when enabling HTML5? It looks like IDs are no longer used, which are what Infinite Scroll targets.
Genesis 2.0 renamed the DIVs to HTML 5 elements.
In the code above, replace “content” with “main” and it should work fine.
Good catch! I’ll edit the post.
That doesn’t work since HTML5 elements like “main” still aren’t technically IDs. You can hook in surrounding divs with IDs though.
Yes you’re right Adam. That serves me right for not testing properly.
You can use the genesis_attr_ filter to alter the attributes of the HTML 5 element. I’ve posted a proper fix on the main article.
Thanks for pointing it out.
Thanks to the html update this works nicely. But there is a but. On the Magazine PRO theme, original, the previous/next headers are shown. (or the numeric ones). I can live with that, but when you scroll down to the last article, and then click on Next page (in the numeric display) then it will mess up and display a really weird html code from the last article in the loop.
Anybody seen that?
Can you send me a link to the theme so that I can have a look?
Thanks for your help with this.
There are some formatting issues with your examples. ‘>’ are being printed as ‘& gt;’ (without the space)
Good catch. I’ve updated the code snippets – thanks @jesseschoff:disqus
Hi! Thanks for this. I’m using the Metro Pro Theme, and I added the 2.0 code to my child theme’s functions.php file. I was able to turn on infinite scroll, and it worked on the home page but not individual posts. Did I do something wrong, or is that how it is intended to work? Thank you!