Sridhar Katakam

Genesis and WordPress Tutorials

Infinite Scroll in Genesis

by 6 Comments

In the past I wrote about setting up infinite loading of Posts in Genesis using Jetpack here.

If you do not wish to use Jetpack or a lighter version of it that provides this feature or Gary Jones' plugin that relies on Jetpack, the 'original' Infinite Scroll script's WordPress version can be used.

Let's see how Infinite-Scroll plugin can be used to automatically (or on click) load the next set of Posts right below the existing ones on Posts page and other listing pages like archives and search results in your Genesis site.

genesis-infinite-scroll

Step 1

Install and activate Infinite-Scroll plugin.

Step 2

Go to Settings > Infinite Scroll and change the selectors like so:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Hello Sridhar,

    I tested infinite scroll using this plugin, after I implemented the Masonry grid using this other tutorial on your website: http://sridharkatakam.com/masonry-genesis/ on the Genesis sample child theme.

    It basically works, but it won’t load the next posts nicely like within the Masonry grid.

    Any suggestions on how to get the styling right?

    Rick

    Reply

  • Hello Sridhar,

    I would like you to know that I found the solution for the problem I posted in a comment before.

    The Infinite Scroll plugin discussed on this page als has an option to configure a ‘Callback’. So, you can fire a script every time a new page is loaded.

    This function can be used to call a piece of javascript that you also put in masonry-init.js (discussed in the masonry articles):

    imagesLoaded( container, function() {

    msnry = new Masonry( container, {

    itemSelector: '.entry',
    gutter: 20

    });

    });

    If you add this, new posts are being placed nicely within the masonry grid.

    Reply

  • Hi Sridhar,

    Thanks for another great tutorial, this worked perfectly on my site.

    Quick question – how can i fix the footer in position at the bottom of the screen so it does not constantly get pushed down as infinite scroll loads new posts?

    Thank you!
    Annabel

    Reply

  • This is working for me! But when infinite scroll loads, its loading my “home before content” again. I can’t seem to figure out how to prevent my home before content to only load on page 1 of the homepage, not multiple pages. Is there a work around do you think? Thanks for your help as always!

    Reply
    • >