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 Tutorial Helpful?