HTML5 Themes and Jetpack Infinite Scroll

Community Forums Forums General Discussion HTML5 Themes and Jetpack Infinite Scroll

This topic is: resolved

This topic contains 3 replies, has 2 voices, and was last updated by  Susan 1 year ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #62612

    Ahjira
    Participant
    Post count: 8

    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>
    #74408

    Susan
    Moderator
    Post count: 9406

    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!


    Susan @ Graphically Designing I offer theme customizations I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #74579

    Ahjira
    Participant
    Post count: 8

    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 :)

    #74585

    Susan
    Moderator
    Post count: 9406

    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!


    Susan @ Graphically Designing I offer theme customizations I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘HTML5 Themes and Jetpack Infinite Scroll’ is closed to new replies.