Modify WordPress Jetpack Plugin To Use 'Class' Instead Of An 'ID' Attribute

Question

What I am trying to achive: Enable seamless & simultaneous infinite scrolling for multiple columns on the same page, each of which is pulling in a different set of content i.e. one column shows the latest posts, while the other shows the latest posts from a specific tag.

Each column uses a different loop, so that they don't ever mess with each other, and this the code I've employed (only to give you an idea of how I'm doing it):

File: index.php (code also on pastebin)

<?php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package Twenty Twelve
 * @since Twenty Twelve 1.0
 */

get_header(); ?>

        <div id="primary" class="content-area">
            <section id="content" class="site-content" role="main">
                <?php if ( have_posts() ) : ?>
                    <?php //twentytwelve_content_nav( 'nav-above' ); ?>
                    <?php /* Start the Loop */ ?>
                    <?php while ( have_posts() ) : the_post(); ?>
                        <article id="post-<?php the_ID(); ?>" <?php post_class('clearfix content-articles'); ?>>
                            <a class="archives-thumb-link" href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_post_thumbnail( 'archives-thumb' ); ?></a>

                            <div class="entry-text-wrapper">
                                <header class="entry-header">
                                    <h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
                                </header><!-- .entry-header -->
                            </div>
                        </article><!-- #post-<?php the_ID(); ?> -->
                    <?php endwhile; ?>
                    <?php twentytwelve_content_nav( 'nav-below' ); ?>
                <?php else : ?>
                    <?php get_template_part( 'no-results', 'index' ); ?>
                <?php endif; ?>
            </section><!-- #content .site-content -->

            <section id="highlights-container" class="site-content">
                <?php $latest_highlights = new WP_Query('tag=highlights&showposts=20&paged=' . $paged); ?>
                <?php if ( $latest_highlights->have_posts() ) : ?>
                    <?php while ($latest_highlights->have_posts()) : $latest_highlights->the_post(); $the_highlights_counter++; ?>
                        <article id="highlights-<?php echo $the_highlights_counter; ?>" class="highlights-wrapper">
                            <a class="highlights-link" href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark">
                                <?php the_post_thumbnail( 'highlights-thumb' ); ?>
                                <h1 class="highlights-title"><?php the_title(); ?> <span>/ <?php echo the_time('M. n'); ?></span></h1>
                            </a>
                        </article>
                    <?php endwhile; ?>
                <?php else : ?>
                    <?php get_template_part( 'no-results', 'index' ); ?>
                <?php endif; ?>
            </section><!-- #content .site-content -->
        </div><!-- #primary .content-area -->

<?php get_footer(); ?>

How I plan to do it: The 'Infinite Scroll' module in Jetpack only constitutes two files -- infinity.php and infinity.js, so for someone who knows JavaScript and PHP it'd be a little easier to look into.

Now the thing is, as stated here, to enable Infinite Scrolling, we need to first provide it with "the ID of the HTML element to which Infinite Scroll should add additional posts to." And since it doesn't accept multiple IDs, it's not possible to enable simultaneous infinite scrolling on multiple columns on the same page.

The idea: So, maybe if I'd modify it to accept a class instead of an id attribute, I can get infinite scrolling on multiple columns to work.

The question is, how do I do it?

---

While trying my best to solve the problem myself (which I couldn't), here are some important bits I've come across, which I think'd make it easier for you to help.

In [infinity.php][5]

• 'container' => 'content' says that content is the default ID for the container element.

• 'id' => self::get_settings()->container, defines id for the JavaScript to call.

In [infinity.js][6]

• var id = $( this ).attr( 'id' ), makes sure that it's an id attribute and NOT a class.

Since, I do not know JS and enough PHP, I may have missed many other important bits. Just thought this info would aid those trying to help.

Do let me know if I am not clear.

NOTE: If you are running a test/dev WordPress site somewhere, and would like to help, please install the Slim Jetpack plugin (the version of Jetpack plugin that doesn't require you to connect to WordPress.com), and enable the 'Infinite Scroll' module from the 'Jetpack' menu. Further instructions can be found here.

Answer 1

Jetpack runs a partial template for the loop (e.g. content.php), retrieves the HTML output by AJAX, then appends it "live" to the current page. It never uses the original template (index.php) so it doesn't matter that you've written 2 distinct loops there.

You might be able write your own solution by borrowing Jetpack's scroll detection and AJAX requests and adapting the rest.