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

WP SITES

2966

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Subscriptions
  • 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

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

CSS Grid Columns Infinite Scroll

Reader Interactions

Comments

  1. Anjana Vadher says

    July 15, 2022 at 10:43 am

    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?

    Reply
    • Brad Dalton says

      July 15, 2022 at 11:26 am

      Hi Anjana

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

      Reply
      • Anjana Vadher says

        July 18, 2022 at 11:56 am

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

        Reply
        • Brad Dalton says

          July 18, 2022 at 11:58 am

          Awesome!

          Reply
  2. 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

    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 );
      Reply
  3. Jeffrey Portillo says

    August 7, 2020 at 4:46 pm

    Waiting for your feedback brad I really like your work

    Reply
  4. 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/

    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' );
      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Code written by Brad Dalton specialist for Genesis & WooCommerce.

Advertise · WPEngine · Genesis · Log in

  • Account
  • Consulting
  • Post Tags
  • Contact
  • Terms
  • Monthly Membership
  • Yearly Subscriptions
  • Log in
 

Loading Comments...