This tutorial provides the code which enables you to load and use infinite scroll in Genesis. Based on extensive testing, this method works better than enabling Jetpacks infinite scroll in Genesis.
Plus, its far easier to modify, customize and style without using a plugin.
And loads super fast as you can see in the following demo video.
There’s 2 steps you need to take to add infinite scroll in Genesis :
- Load the infinite scroll js – 2 methods
- Set the infinite scroll options
Step 1 : Load the infinite scroll js.
You can do this by uploading the infinite-scroll.pkgd.min.js file to your child themes JS folder like this :
or
Load the externally hosted version :
Add either of the above PHP code snippets to your child themes functions.php or directly to a template where you want to load infinite scroll ( and remove the conditional tag ).
Step 2 : Upload the option settings to your child themes folder.
Create a new file named infinite-scroll-set.js in your child themes JS folder and add the jQuery above to the file.
Posts Per Page
You can then set your WordPress Reading Settings to 1 or 2 posts per page.
You can also override these settings using pre_get_posts in your functions file like this :
add_action('pre_get_posts', 'set_posts_per_page');
function set_posts_per_page( $query ){
if ( ! is_admin() AND $query->is_main_query() AND $query->is_home() ) {
$query->set( 'posts_per_page', 2 );
}
}Swap out the is_home() conditional tag in the above code for use on other paginated archive pages.
Tested using the Genesis Sample child theme by StudioPress which displays latest posts on the front page. May require the use of the is_archive or other conditional tag for use in other themes.
Leave a Reply
You must be logged in to post a comment.