• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar

WP SITES

2299

Original Genesis Tutorials & 5000+ Code

Snippets

  • Subscribe
  • Full Access
  • Videos
  • Log in
  • Twitter
  • Facebook
  • LinkedIn
  • Email
  • More
  • Reddit
  • Tumblr
  • Google
  • Print
  • Pinterest
  • Telegram
  • Pocket
  • Skype
  • WhatsApp

Genesis Infinite Scroll With Button To Load More Posts

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 :

Registration Required. Click here to register for full access

Related Tutorials

  • Infinite Scroll In Genesis Page Template
  • Click To Show More Videos In Page Template

Grid Columns Infinite Scroll

Primary Sidebar

Brad Dalton Specializes In StudioPress child theme customization & code modification. Access all code

Featured Downloads

  • Add Slider To Infinity Pro Front Page 1 Widget Background 67213
  • Responsive Image After Header On Single Pages 67126
  • Rotate Widget Background Images In Genesis 67200
WordPress Speed Test
  • Membership
    • Account Subscription Details
  • Tagged by Theme
  • Blog
  • T.O.C
    • Membership F.A.Q’s
  • RSS
  • Contact
  • Newsletter ( Twice Weekly )

Usage Policy · Tools & Resources


Images, code, and content on this website are property of wpsites.net and are protected by copyright law.
WP Sites does not grant permission for any repurposing, republication, or redistribution.
"Disclosure: Some of the links in some posts are "affiliate links."
This means if you click on the link and purchase the item, I will receive an affiliate commission.
loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.