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.
defines a function zpd_infinite_scroll_init() in which we add IS support to the theme
sets up the render argument and points it to the genesis_do_loop() function which controls the output of posts.
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.
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: