Jetpack Infinite Scrolling For Multiple Columns On Same Page?

0 Views

Enabling infinite scrolling is as simple as adding this snippet to the theme’s functions.php file (where ‘content’ is the id of the container that wraps the posts): 

add_theme_support( 'infinite-scroll', array(
    'type' => 'scroll',
    'container' => 'content',
    'footer' => false,
) );

But what should I do if my website has a multiple column layout where, for instance, one column shows the latest posts, and the other column lists the latest posts from a tag (highlights)? i.e. essentially there are two containers.

Read More

I tried these two snippets (see below), and either way, infinite scrolling is only enabled for one column/container. 

add_theme_support( 'infinite-scroll', array(
    'type' => 'scroll',
    'container' => 'content',
    'footer' => false,
) );

add_theme_support( 'infinite-scroll', array(
    'type' => 'scroll',
    'container' => 'highlights',
    'footer' => false,
) );

and 

add_theme_support( 'infinite-scroll', array(
    'type' => 'click',
    'container' => array( 'content', 'highlights' ),
    'footer' => false,
) );

What am I doing wrong?

NOTE: If the fact that installing Jetpack requires a wordpress.com account is holding you back, please try Slim Jetpack. It even works on a local install of WP, and doesn’t require a wp.com account.

Post Views: 0

Related posts

Leave a Reply

2 comments

  1. I’ve checked the source code for Slim Jetpack and this task can not be accomplished without rewriting that plugin.

    Here are some hints:

    1. You’ll have to duplicate line 539 of ‘/modules/infinity-scroll/infinity.php’ stating:

      jQuery.extend( infiniteScroll.settings.scripts, <?php echo json_encode( $scripts ); ?> );

    2. You’ll have to duplicate line 475 of ‘/modules/infinity-scroll/infinity.js’ as this initializes infinite scroll. (Do you see the variable name match?)

      infiniteScroll.scroller = new Scroller( infiniteScroll.settings );

    3. What’s more, you’ll have to tweak the module to accept more attributes, or at least post_type attribute to be able to determine what post_type to bring for each inifinite loop — this must be done in both JS and PHP (callback for ajax function).

    As I’ve said, the plugin would have to be rewritten.

  2. In an email response, Kris Karkoski, Happiness Engineer (WordPress.com) at Automattic told me, “Infinite Scrolling with multiple columns is not supported in Jetpack at this time.”