Add Jetpacks Infinite Scroll To Genesis Sample Theme

This code enables you to add Infinite Scroll ( which loads more posts by clicking a button ) from Jetpack to any archive page type in the Genesis Sample theme by StudioPress.

Note : If you want a more reliable solution which is easier to modify, customize & style, check out this tutorial which doesn’t require the installation of a Infinite Scroll plugin.

Video – Testing Code

The demo video shows infinite scroll installed to work with the clickable button option and tested in the default theme for Genesis.

Installation

There’s 3 steps assuming you have installed and activated the Jetpack plugin by Automattic :

Step 1 : From your WordPress Dashboard, go to Jetpack > Settings and scroll down to the following section where you can configure the Infinite Scroll settings to load more posts in page with a button like you see in the following screenshot :

Step 2 : From your WordPress Dashboard, go to Reading settings > Infinite Scroll Behavior and if necessary, uncheck the setting to show clickable button to show posts like you see in the following screenshot :

Step 3 : Using FTP & a code editor, add the following PHP code to the end of your Genesis child themes functions.php file.

add_theme_support(
    'infinite-scroll',
	array(
	    'container'      => 'genesis-content',
	    'render'         => 'genesis_do_loop',
) );


add_action ( 'genesis_after_entry', 'remove_pagination' );
function remove_pagination() {
if ( is_home() ) {    
remove_action( 'genesis_after_endwhile', 'genesis_posts_nav' );
    }
}

Tested using the Genesis Sample child theme by StudioPress. Code may need modification/extending for use in other Genesis child themes.

Style The Button

This is a bit tricky because you need to override the Jetpack plugins styles. An easy way to do this is to add CSS to Appearance > Edit CSS via the customizer.

.content #infinite-handle span {
    border-radius: 1px;
    color: #eee;
    cursor: pointer;
    font-size: 18px;
    padding: 12px 18px;
    display: table;
    margin: 0 auto;
}

.content #infinite-handle {
    margin-bottom: 40px;
}

This enables you to use CSS to position the button and also use your themes default button styling :

Useful information and code : Infinite Scroll Documents

Trouble Shooting

May require clearance of different types of caching.

You may also want to add a conditional check to the code which removes the default pagination

add_action ( 'genesis_after_entry', 'remove_pagination' );
function remove_pagination() {
if ( is_home() || is_archive() ) {
    remove_action( 'genesis_after_endwhile', 'genesis_posts_nav' );
   }
}

Based on testing it works fine on archives and the home page but not on the Genesis blog page template or search archives.

Related Tutorials

• Code Infinite Scroll In Genesis