Skip to content

Instantly share code, notes, and snippets.

@vajrasar
Forked from anonymous/add_jetpack_infinite.php
Last active July 13, 2017 19:57
Show Gist options
  • Save vajrasar/6682790 to your computer and use it in GitHub Desktop.
Save vajrasar/6682790 to your computer and use it in GitHub Desktop.
Steps to add Infinite Scroll (Jetpack) to a Genesis Child Theme running on Genesis 2.0 + HTML 5. Code goes in functions.php
<?php
/*
To add Infinite Loop Module provided in Jetpack wordpress Plugin, in Genesis driven site.
*/
/*
Step 1. Install Jetpack Plugin
*/
/*
Step 2. Make your theme ready for Infinite Scroll
We will need to put an 'ID' inside the main posts container which by default in HTML5 contains only class.
Thanks to @GaryJ (Gary Jones), you can do that by filtering genesis_attr_content as shown below.
*/
add_filter( 'genesis_attr_content', 'custom_attributes_content' );
function custom_attributes_content( $attributes ) {
$attributes['id'] = 'main-content-area';
return $attributes;
}
/*
Step 3. Make your theme compatible for Infinite Scroll
We will put the following code, to show the Infinite Scroll module about how and which element to repeat,
depending on what user interaction and to repeat what chunk of code while repeating the element.
*/
function custom_infinite_scroll() {
add_theme_support( 'infinite-scroll', array(
'container' => 'main-content-area',
'footer' => false,
'type' => 'click',
'render' => 'genesis_do_loop',
) );
}
add_action( 'after_setup_theme', 'custom_infinite_scroll' );
/*
Refer to http://jetpack.me/support/infinite-scroll/ for the description on attributes that we provided here.
The main catch is 'container' which tells Infinite Loop to repeat 'ID' which is 'main-content-area'; 'type' - which tells
Infinite loop that it should work when user clicks a load more (or Older Posts) button and 'render' where we proud genesis
users tell the Infinite Loop to use 'genesis_do_loop' to load more posts.
*/
/*
Step 4. Save the functions.php and refresh your site, if you still don't see the Infinite Loop in action,
then go to dashboard -> Jetpack and look for Infinite Loop module and activate it.
You will now have a working Infinite Loop in action!
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment