HTML5 Themes and Jetpack Infinite Scroll

[Ahjira]

Have any of you solved the issue of Jetpack's Infinite Scroll needing an ID on the content div for it to work? Genesis HTML5 does not output an ID on the content div anymore and that's why Infinite Scroll does not work.

I'm curious if a "best solution" to work around this has been noted yet.

EDIT: I threw some jQuery in the Genesis Header Scripts field ( which does add the ID's ) but Infinite Scroll still doesn't work for me with HTML5 enabled.

<script type="text/javascript">
jQuery(document).ready(function($) {
  $('.content').attr('id', 'content');
  $('.site-inner').attr('id', 'inner');
});
</script>

[Susan]

As you posted this a while back, I hope you were able to get your issue resolved. If not, can you please check back in here, and I will escalate for you. Thanks!

[Ahjira]

Hey Susan, yes I found Gary Jones's solution on GitHub for this and this should do it if anyone else is looking for the answer. This is for HTML5 themes only.

First add a new ID to the content section...

add_filter( 'genesis_attr_content', 'jpis_add_id_to_content' );
function jpis_add_id_to_content( $attributes ) {
  $attributes['id'] = 'main-content';
  return $attributes;
}

Then add Jetpack support like this...

add_action( 'init', 'add_jpis_support' );
function flint_add_jpis_support() {
  add_theme_support( 'infinite-scroll', array(
    'type' => 'scroll',
    'container' => 'main-content',
    'footer'	 => false,
    'render' => 'genesis_do_loop'
  )
  );

}

My original solution was firing too late but this solution did the trick. Thank you for checking up. Much appreciated 🙂

[Susan]

Thanks for coming back with the solution! I will close this thread now. If you have any more questions, go ahead and start another thread. Thanks!

[Author]

Posts