Sridhar Katakam

Genesis and WordPress Tutorials

Jetpack’s Infinite Scroll in Genesis

by 7 Comments

Update on Tuesday, February 18, 2014: Gary Jones has a released a plugin that does the same as what's explained below. Get it here.

One of the many modules in Jetpack is Infinite Scroll which loads the next page of posts automatically as visitors reaches the end of posts.

To get Infinite Scroll working in your Genesis theme, the first step is to activate the module in Jetpack.

2013-10-25_01-03-12

Scroll type (default):

Click type:

Since Infinite Scroll depends on a CSS ID for the main element, we will use the genesis_attr_content filter to add a ID to "main" (.content) element only on Post Pages and archives.

We shall then add theme support for infinite scroll while setting

a) [optional] type equal to scroll (default) or click. scroll will cause posts to be loaded automatically when the visitor approaches the bottom of the current list of posts, while click shows a Load more posts button, letting the user control when more posts are loaded.
b) container equal to our custom ID
c) render equal to genesis_do_loop

Finally as we do not want the archive pagination (Next Page» links or numbers) we will remove it using a remove_action.

Add the following in child theme's functions.php:

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

Already a member? Log in below or here.

  • Hare Krishna Sridharji Prabu! I want to thank you for helping me out the last time with infinite scroll. After I upgraded to Genesis 2.0 – it started working. Since then I switched themes, and I’m much happier with the results.

    Ok – so here is my question. I applied the instructions here, and its working – for the most part. If you check out this cat page the infinite scroll works:

    http://iskconme2.wpengine.com/author/mahanidhiswami/

    The only place where it doesn’t work is the homepage where I have the portfolio items:

    http://iskconme2.wpengine.com/

    I think it might be something really simple. Perhaps those porfolio items are using a different div, or whatever, and thus they’re not being queued by infinite scroll.

    Would you be so kind as to point me in the right direction?

    Much obliged. -Alexander

    Reply

  • Hey Sridhar – thanks for your awesome Genesis tutorials! A great resource.

    We implemented Infinite Scroll using Jetpack and Gary’s plugin, but we’re finding an issue on Chrome. Seems to work great on Firefox, but with Chrome on the home page it gets caught in some type of post query loop and it repeats the 7 Page 2 posts on every subsequent page. Just like Alexander reported above though, it’s working fine on category/archive pages even on Chrome. Ever seen this? Any ideas?

    Here’s the site: http://essaysnark.com

    Reply

    • Got it working. Here’s how we set the options in the array for our theme, in case anyone else has trouble and wants to start here:

      add_theme_support(
      'infinite-scroll',
      array(
      'container' => 'main-content',
      'render' => 'genesis_do_loop',
      'type' => 'scroll',
      'footer_widgets' => false
      // 'wrapper' => true,
      // 'posts_per_page' => false,
      )
      );

      Reply

  • Can you use infinite scroll with a custom archive template? When I add support for infinite scrolling it loads the next pages content without any of the formats i’ve added to the archive.php or functions.php files (no post meta, post content hidden if post has thumbnail)…

    Reply
    • >