-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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