This tutorial contains a Genesis archive template which displays your posts in a grid and also includes infinite scroll.
The code adds a button which loads more posts when clicked and also displays a animated ellipsis like you see in the following video demo :
Video Demo
Shows posts displaying columns using CSS grid with a button displaying after the first 3 posts. When clicked, the animated ellips displays and more posts are loaded. Includes CSS for media queries and displays posts in 2 columns @ 1200px width then 1 column @ 800px.
Code for use as a front page archive template. Change the named of the file using the WordPress Template Hierarchy for use on any other archive page type.
Tested using the Genesis Sample child theme by StudioPress.
Simple Installation
You’ll find 5 files in the members download folder.
There’s 3 simple steps to install the Infinite Scroll button on any archive page :
Step 1 : Upload the 2 .js files and the front-page.php file to your child themes root directory.
Step 2 : Copy & paste the CSS from the style.css file to the end of your child themes style.css file. Clear caching.
Step 3 : Copy & paste the PHP code from the functions.php file to the end of your child themes functions.php file. This sets posts per page to any number you desire.
Register or login to access the download folder for members :