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

WP SITES

2752

Original WordPress Tutorials & 6000+ Guaranteed Code

Snippets

  • Videos
  • Premium Access
  • Log in

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 :

Register for full access

Related Tutorials

  • Show WordPress Gallery Items On Click
  • Infinite Scroll In Genesis Page Template
  • Click To Show More Videos In Page Template

Grid Columns Infinite Scroll

Reader Interactions

Comments

  1. Jeffrey Portillo says

    August 7, 2020 at 4:52 pm

    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

    Log in to Reply
    • Brad Dalton says

      August 8, 2020 at 10:07 am

      Add this code to your archive file

      add_filter( genesis_site_layout, __genesis_return_full_width_content );
      Log in to Reply
  2. Jeffrey Portillo says

    August 7, 2020 at 4:46 pm

    Waiting for your feedback brad I really like your work

    Log in to Reply
  3. Jeffrey Portillo says

    August 7, 2020 at 4:43 pm

    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/

    Log in to Reply
    • Brad Dalton says

      August 8, 2020 at 10:04 am

      Hello Jeffrey. Please set the Layout settings to full width or add this line to your template file

      add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' );
      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Advertise · WPEngine · Genesis · Log in

  • Access/Download Problems
  • Account Details
 

Loading Comments...
 

You must be logged in to post a comment.