Custom Loop and Infinite Scroll

Question

I am using customized version of _s theme where I have Product CPT.

In the following files, I need to use Infinite scroll (provided by Jetpack) -

archive-products.php
taxonomy-[tax-name].php
home.php
archive.php

Now, the problem is most of these templates use custom loop (using WP_Query which ends with pagination after while()).

I have used following code in functions.php after activating jetpack and Photon module -

function vg_infinite_scroll_init() {
    add_theme_support( 'infinite-scroll', array(
        'container' => 'page-content',
        'footer' => 'page',
        'type'   => 'click',
        'render'  => false,
    ) );
}

add_action( 'after_setup_theme', 'vg_infinite_scroll_init' );

Also, I wrapped all posts under #page-content on archive-products.php. But the infinite scroll is not working either in scroll or in click type. Any ideas?

It is also pointed out to me that I should use the render arg of the infinite loop to describe my custom loop but am not sure how to do that as it would vary in every template.

For Ex: Following is the whole code am using in archive-products.php -

<div class="row">
    <?php
    $prod_arch_args = array(
                    'post_type' => 'products',
                    'posts_per_page' => '12',
                    'paged' => get_query_var( 'paged' ),
                    );
    $prod_arch_query = new WP_Query( $prod_arch_args );

    if( $prod_arch_query->have_posts() ) {
        while( $prod_arch_query->have_posts() ) {
            $prod_arch_query->the_post();
            $prod_images = get_post_meta( $post->ID, 'cmb2_prod_images', true );
            $prod_price = get_post_meta( $post->ID, 'cmb2_prod_price', true );
    ?>
            <div class="col-xs-12 col-sm-6 col-md-4 product-main wow fadeInUp">
                <figure itemscope itemtype="http://schema.org/Product" class="product-item relative">
                    <div class="product-display">
                        <div class="list-pic">
                            <a href="<?php the_permalink(); ?>">
                                <?php
                                foreach ($prod_images as $key => $value) {
                                    ?>
                                    <?php echo wp_get_attachment_image( $key, 'prod-list', 'itemprop = image' ); ?>
                                    <?php
                                    continue;
                                }
                                ?>
                            </a>
                        </div>
                        <div class="view-detail"><a href="<?php the_permalink(); ?>">View Detail</a></div>
                    </div>
                    <figcaption class="relative">
                        <div class="pro-list-title" >
                            <h3 itemprop="name">
                            <a href="#"><?php the_title(); ?></a>
                            </h3>
                        </div>
                        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="pro-list-rates">
                            <div class="pro-list-rates-new">
                                <span  itemprop="priceCurrency">
                                    <i class="fa fa-inr"></i>
                                </span> 
                                <span itemprop="price"><?php echo $prod_price; ?></span>
                            </div>
                        </div>
                        <div class="add-container">
                            <!-- <a class="btn btn-1 btn-1a">
                                <i class="fa fa-cart-plus"></i> Add to container</a> -->
                            <?php vg_after_entry(); ?>
                        </div>
                    </figcaption>
                </figure>
            </div>

            <?php
        }
        the_posts_navigation();
        wp_reset_postdata();
    }
    ?>
</div>

Answer 1

I used 'init' in the add_action in my own implementation of infinite scroll, try that.

add_action( 'init', 'vg_infinite_scroll_init' );

As to your question about rendering a custom query you would do the following.

-Set the render to your function name

'render' => 'your_render_function,

-Add your function to call a specified loop template

function your_render_function(){
  get_template_part( 'custom-loop-content' )
}

create a file called custom-loop-content.php and add your custom query in there. Be aware that your query will be reset each time. I couldn't think of a way around that.