fbpx
Home » Blog » Integrating JetPack Infinite Scroll with Genesis

Integrating JetPack Infinite Scroll with Genesis

Our last couple of blog posts featured the JetPack Infinite Scroll (IS) module.  Here we show you how to integrate the code into a Genesis child theme.

If you haven’t read them already, you may want to read up on…

  1. Using the Infinite Scroll Module in JetPack
  2. Customising the JetPack Infinite Scroll Footer

When it comes to themes, the Genesis framework does things a little differently and that also goes for integrating the JetPack Infinite Scroll module.

The Zero Point Development website runs on top of Genesis so you can see the IS in action on our home page.

Genesis Child Themes and The Loop

To understand how to link IS into a Genesis child theme, you need to understand how Genesis generates the posts lists in the loop.

You may have heard of “the loop” in WordPress.  This is the cyclic process where WordPress looks up all the posts it needs to process and display.

Genesis has something similar called genesis_do_loop() and it is this function that we need to link into the IS module.

Integrating Infinite Scroll with the Genesis Loop

This is almost the same code as the standard way to integrate IS into a theme, with a couple of changes.

Add this code to your theme’s functions.php file.

Lines 4-10
defines a function zpd_infinite_scroll_init() in which we add IS support to the theme

Line 8
sets up the render argument and points it to the genesis_do_loop() function which controls the output of posts.

Line 11
adds an action to link your new function zpd_infinite_scroll_init() to the Genesis after_setup_theme() function which gets called once the main files of your Genesis Child Theme have been processed.

Simple as.

Update for Genesis 2.0

Genesis 2.0 has the option of using HTML5 theme support.

In doing this, DIV id’s are replaced with HTML elements.

“Container” is now the HTML 5 element called “Main” and by default has no id attribute.

You need to use the genesis_attr_ filter to add an id attribute onto the main element.

So to get the infinite scroll working in Genesis 2.0 with HTML 5 support, use the following:

Keep In Touch

Wil

Wil is a dad, consultant, developer, conference organiser, speaker and business mentor. He co-organizes the WordPress Sydney meetup group and has been on the orgnising committee for WordCamp Sydney since 2014. He speaks at many technical events and contributes to the WordPress open source project. His likes are chillies, craft beer and electrogravitics.

13 thoughts on “Integrating JetPack Infinite Scroll with Genesis”

  1. Jimmy Zimmerman

    Thank you! I was stuck on this for a while until I found your post. It was the “render” option that I was missing. I kept getting an empty response from the XHR call.

  2. Great info! But I just wonder if there is a proper way on how to hide the navigation/pagination when IS is activated rather than adding display:none?

    1. Sorry for the late reply Marc.

      I’ve added the code you need to get it working with Genesis 2.x.

      Just replace “content” with “main”. See post for more details.

      Wil.

    1. Genesis 2.0 renamed the DIVs to HTML 5 elements.

      In the code above, replace “content” with “main” and it should work fine.

      Good catch! I’ll edit the post.

        1. Yes you’re right Adam. That serves me right for not testing properly.

          You can use the genesis_attr_ filter to alter the attributes of the HTML 5 element. I’ve posted a proper fix on the main article.

          Thanks for pointing it out.

  3. Thanks to the html update this works nicely. But there is a but. On the Magazine PRO theme, original, the previous/next headers are shown. (or the numeric ones). I can live with that, but when you scroll down to the last article, and then click on Next page (in the numeric display) then it will mess up and display a really weird html code from the last article in the loop.

    Anybody seen that?

  4. Thanks for your help with this.

    There are some formatting issues with your examples. ‘>’ are being printed as ‘& gt;’ (without the space)

  5. Hi! Thanks for this. I’m using the Metro Pro Theme, and I added the 2.0 code to my child theme’s functions.php file. I was able to turn on infinite scroll, and it worked on the home page but not individual posts. Did I do something wrong, or is that how it is intended to work? Thank you!

Comments are closed.

If You Enjoyed This Post
Join Our Newsletter
Give it a try, you can unsubscribe anytime.
Close