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 :
Hi Brad, I think found out how to make it works
staging site: https://staging.homesecuritystore.com/category/home-security-system/
main site: https://homesecuritystore.com/category/home-security-system/
Unfortunately brad the design looks pretty messy I want to make my category page looks like my main website can you guide me hows that possible
Add this code to your archive file
Waiting for your feedback brad I really like your work
Hi there I am new in genesis framework I’m using magazine pro theme and I’m applying these changes on my category page however it’s not working
I replace the name of front-page.php to category-$slug.php
https://staging.homesecuritystore.com/category/home-security-system/
Hello Jeffrey. Please set the Layout settings to full width or add this line to your template file