1

Good Afternoon!

I have having an issue on a site I am working on where in that the blog posts "repeat" and by that I mean they are being displayed twice. Ideally I would like the page to work as follows. The first four blog posts loaded are the most recent ones, you scroll down, the jetpack infinite scroll render kicks, then the remaining 4 posts load. (We currently have 7 posts in total). You can see a live example of this issue here: http://weightcreative.com/blog/

Here is my initial loop code:

<div id="postsContainer" class="blog-posts flex flex-column">
  <?php

    $paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;

    $query_args = array(
      'post_type' => 'post',
      'posts_per_page' => 4,
      'paged' => $paged,
    );

    $the_query = new WP_Query( $query_args );

    if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post();

      get_template_part( 'template-parts/content', get_post_type() );

    endwhile; endif;
    wp_reset_postdata();
  ?>

</div>

And here is the jet pack render loop:

/*
 * Support Pages for JetPack Infinite Scroll
 */
function tweak_jp_scroll_support() {
    $supported = current_theme_supports( 'infinite-scroll' ) && ( is_home() || is_archive() || is_search() || is_page() );

    return $supported;
}
add_filter( 'infinite_scroll_archive_supported', 'tweak_jp_scroll_support' );


function weight_creative_jetpack_setup() {
    // Add theme support for Infinite Scroll.
    add_theme_support( 'infinite-scroll', array(
            'type'      => 'scroll',
            'container' => 'postsContainer',
            'render'    => 'weight_creative_infinite_scroll_render',
            'footer'    => false,
            'footer_widgets' => false,
            'wrapper'   => false
    ) );
}
add_action( 'init', 'weight_creative_jetpack_setup' );

/**
 * Custom render function for Infinite Scroll.
 */
function weight_creative_infinite_scroll_render() {
    while ( have_posts() ) {
        the_post(); 

        if ( 'post' == get_post_type() ) :
            get_template_part( 'template-parts/content-post' );         
        endif;
        if ( 'portfolio' == get_post_type() ) :
                get_template_part( 'template-parts/content-portfolio' );
        endif;
    }
}

I was just wondering if there is anything I can do to fix this issue? One solution I found was to disable the infinite scroll and adding the 'nopaging' => true to the first loop and then it will load all seven posts in order.

How ever ideally I would like to have the infinite scroll functioning as I had thought up originally. Thanks in advanced for the help!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.