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 gadget freak, tech enthusiast and full stack developer. He loves to try everything with technology and blog about his tech experience. Apart from writing, he spends most of this time developing useful web apps and mobile applications for Android and iOS.

Related articles

Blogging

MaxBlogPress Ninja Affiliate WordPress plugin Review

Ninja Affiliate
Reviews

Fame Themes Review | Premium WordPress Themes

wpshit review
Blogging

7 Website Security Tips to Protect Yourself from Vulnerabilities and DDoS Attacks

Install Firewall on Server

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. Motorola Edge 30 Officially Launched in India with Snapdragon 778G SoC starting at Rs. 27,999

  2. Surfshark Review – A Lock Over Your Privacy

  3. Fortnite Returns to iOS Devices Through Microsoft's Xbox Cloud Gaming for Free

  4. Insightful – Grow Your Employees' Productivity

  5. Moto E32 Launched with 6.5-inch Display, 5000mAh Battery and Unisoc T606 SoC

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
Advertisement
Geek Dashboard Logo

Geek Dashboard, a technology blog strives to produce high-quality tech for our readers. Here you will find the latest updates on trending tech news, unbiased product reviews, and how-to guides on various gadgets.

Got a Tip? Write In tip@geekdashboard.com

© 2012 - 2022 · 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