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.

Was this helpful?

Yes

Thanks for your feedback!