WP SITES

Log in

Genesis Infinite Scroll With Button To Load More Posts

—

by

Brad Dalton

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

Comments

9 responses to “Genesis Infinite Scroll With Button To Load More Posts”

  1. Anjana Vadher Avatar
    Anjana Vadher

    I am using Magazine Pro theme and I implemented it but site went down due to this – https://prnt.sc/3HFSx2f07b0B

    Can you please help me on this?

    1. Brad Dalton Avatar
      Brad Dalton

      Hi Anjana

      Please email me FTP hostname username and password or cPanel URL username and password brad@wpsites.net

      1. Anjana Vadher Avatar
        Anjana Vadher

        Thank you so much for your quick support, Brad! The code is working fine now 🙂

        1. Brad Dalton Avatar
          Brad Dalton

          Awesome!

  2. Jeffrey Portillo Avatar
    Jeffrey Portillo

    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

    1. Brad Dalton Avatar
      Brad Dalton

      Add this code to your archive file

      [code]add_filter( ‘genesis_site_layout’, ‘__genesis_return_full_width_content’ );[/code]

  3. Jeffrey Portillo Avatar
    Jeffrey Portillo

    Waiting for your feedback brad I really like your work

  4. Jeffrey Portillo Avatar
    Jeffrey Portillo

    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/

    1. Brad Dalton Avatar
      Brad Dalton

      Hello Jeffrey. Please set the Layout settings to full width or add this line to your template file
      [code]add_filter( ‘genesis_site_layout’, ‘__genesis_return_full_width_content’ );[/code]

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.