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


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">
    $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_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(); ?>">
                                foreach ($prod_images as $key => $value) {
                                    <?php echo wp_get_attachment_image( $key, 'prod-list', 'itemprop = image' ); ?>
                        <div class="view-detail"><a href="<?php the_permalink(); ?>">View Detail</a></div>
                    <figcaption class="relative">
                        <div class="pro-list-title" >
                            <h3 itemprop="name">
                            <a href="#"><?php the_title(); ?></a>
                        <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 itemprop="price"><?php echo $prod_price; ?></span>
                        <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(); ?>


1 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.