Geek Dashboard

How-To's, Smartphones, News and Reviews

  • Home
  • News
  • Smartphones
    • Android
    • iOS
  • Computers
    • Windows
    • macOS
  • Internet
  • Reviews
You are at Home » Blogging

How to Add Infinite Scroll to Genesis Child Theme Archives

Last Updated on February 23, 2022 by Amar Ilindra Leave a Comment

We have been using the Genesis framework from Studiopress for this website since 2012. One of the most important features that are missing in the Genesis framework is infinite scrolling.

To be honest, I haven’t seen any major changes in theme options or any new major features in the last 5-6 years. I wish the Studiopress team adopts quicky and adds more options, features, and customizability to the framework (without touching the code) to compete with competitors like Generatepress.

I have waited so long for the infinite scroll on Genesis but it didn’t come out officially yet. So I decided to build one for ourselves and for everyone. Of course, it’s completely free and open-source.

Infinite Scroll for Genesis with Free WordPress Plugin

Infinite Scroll for Genesis

There are a few WordPress plugins already available to enable infinite scroll for any WordPress theme. But the problem with those plugins is, they are not built exclusively for the Genesis framework. For those plugins to work, you have to manually identify the class'es and you must have basic HTML, CSS, and Inspect Element knowledge.

Solving all these problems, I have built Infinite Scroll for Genesis WordPress plugin.

Download Plugin

You just need to install and activate the plugin on your WordPress site running on the Genesis framework and you are good to go. You also got a lot of flexible options to enable/disable infinite scroll on post archives, tag archives, category archives, author archives, search results, etc.

How to Enable Infinite Scrolling on Genesis Child Themes

Using the “Infinite scroll for Genesis” plugin is very easy and no coding knowledge is required. Let’s see how to do it quicky and correctly.

Steps to add infinite scroll on WordPress themes running on Genesis Framework

  • Step 1: Install and Activate “Infinite Scroll for Genesis” Plugin
  • Step 2: Configure the Plugin
  • Step 3: Save Configuration
  • Step 4: Test your website thoroughly

Step 1: Install and Activate “Infinite Scroll for Genesis” Plugin

Infinite Scroll for Genesis plugin is available on the WordPress plugin directory. So you can install it directly from your WordPress website.

From the left site Admin menu, hover your mouse on Plugins and click Add New. Now search the “Infinite Scroll for Genesis” keyword. From the search results, choose the one from the author “Amar Ilindra” and click Install Now button.

Once the plugin is installed, click on Activate to enable the plugin.

Search Result of Infinite Scroll for Genesis Keyword

Step 2: Configure the Plugin

Once the plugin is installed and activated, you will find “Infinite Scroll” option inside the Settings menu.

Inside the Configure tab, you will find the following options. Configure them depending on your preferences.

  1. You can add infinite scroll at the following locations under the “Enable Infinite Scroll On” option.
    • Home Page
    • Blog
    • Category Archives
    • Tag Archives
    • Author Archives
    • Search Results
  2. You can load more posts either on clicking the Load More button or automatically when the user scrolls to the end of the last post. You can choose it under the “Load more posts” option.
  3. Choose the loading animation style under the “Loading Animation Style” option. You have 10 beautiful animations to choose from.
  4. Since every website has it’s own color preference, you can set the button color and loading animation color under the “Animation and Button color” option.
  5. The last one is the Priority option which you can leave as default. Increase or decrease the priority only when you notice UI issues while loading posts with infinite scroll.

Infinite Scroll for Genesis WordPress Plugin Settings

Step 3: Save Configuration

After configuring the options, click the Update Configuration button to save the settings. If you are not sure how each animation looks like, you can check the preview at the Help tab or from the below image.

Infinite Scroll for Genesis Animations Preview

Step 4: Test your website thoroughly

You are all set with the plugin settings. It’s time for testing.

Check your website archives and test if everything works as configured. When more posts are displayed, then URL in the address bar automatically changes to its corresponding page like /page/2.

Also, your regular paginated URLs (/page/2, /page/3, etc.,) still work with proper rel=pre and rel=next tags, making it sharable and SEO friendly.

SEO Friendly Infinite Scroll for Genesis

Plugin Information and Live Demo

The plugin is very well optimized with no extra CSS and image files on the front end. All loading animations are displayed with pure inline CSS without gifs. Also, your single posts are untouched making zero impact on page load time and performance.

If you are wondering how the plugin actually works on websites, you can check the live demo here. The entire source code of the plugin is open-sourced and available on GitHub.

Also Read: How to Manually Backup Files and Database in DigitalOcean for Free

Conclusion

Infinite scroll is a very good user experience only when you don’t have important information on your site footer. Sometimes it may be annoying when users try to reach the footer section of your website but infinite scroll keeps showing additional posts breaking their flow.

If your users need to see the footer information, you must use the “infinite scroll on button click”. So if the user wishes to read more posts, they can click the Load More button or they can scroll all the way bottom to footer without any interruptions.

However, if your website is small without any important information at the bottom, you can load posts automatically on scroll to make users stay more time on your site.

#Coding#genesis#Plugins#WordPress
Posted inBlogging

Spread the Word!

Avatar for Amar Ilindra

Amar Ilindra Facebook Twitter LinkedIn Instagram GitHub

Amar Ilindra is a tech-savvy individual who is passionate about gadgets and new technology. He is a full-stack developer who enjoys experimenting with technology and sharing his experiences through blogging. When he's not writing, he devotes his time to creating practical web and mobile applications for both Android and iOS platforms.

Related articles

Blogging

5 Best Free and Premium WordPress Popup Plugins

wordpress popup plugins
Blogging

How Set Chrome Address bar, Status bar Color and Favicon for your Website in Android Mobiles

how to change addrss bar and notification bar color
Reviews

Fame Themes Review | Premium WordPress Themes

wpshit review

Comment Policy:

The comments section is aimed to help our readers in case of any questions or you can even appreciate us for our hard work. Every comment is strictly moderated before approving it.

Your name and comment will be visible to the public. Never share your personal information in the comments section.

Leave a Reply Cancel reply

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

Over 1,30,286+ Followers

Join to get latest updates from Geek Dashboard

Facebook Twitter Telegram Pinterest YouTube Instagram

Recently Published

  1. Tecno Spark Go (2023) Launched with MediaTek Helio A22 SoC and Dual Cameras in India

  2. Creating Social Media Visuals: 9 Tips, Tricks, and Tools

  3. Hum to Search: 5 Best Music Recognition Apps to Find a Song by Humming

  4. Fire-Boltt Talk Ultra With Bluetooth Calling and 123 Sport Modes Launched in India

  5. Wikolo Super App: Bringing Countless Benefits for Students

Geek Dashboard Placeholder

Download the apps and never miss a story from us

We put a lot effort and resources in writing our articles and we believe it is our responsibility to satisfy your tech hunger. We will keep you filled forever!

  • Get Geek Dashboard App from Google Play
  • Get Geek Dashboard App from Chrome Web Store
Geek Dashboard Logo

At Geek Dashboard, we are dedicated to bringing you the latest and greatest in technology news, reviews, and how-to guides. From smartphones to laptops, and everything in between, we've got you covered.

Got a Tip? Write In tip@geekdashboard.com

© 2012 - 2023 · Geek Dashboard, product of ikva eSolutions

Blog Advertise About Jobs Contact Privacy Policy Write For Us T&C Office Setup

No dogs were injured while working on this website because we love them