I’m developing a single page application (SAP) based theme, where I’ve Portfolio CPT to show portfolio items in loop other than blog posts.

I’ve built 2 separate posts load more function which triggers on click. SO the blog posts are working fine, but on click on load more button on Portfolio section it appends posts for Blog instead of Portfolio.

Following I’ve Code Functions for Blog.

blog-functions.php

// Enqueing Scripts for loading blogs posts via Ajax
wp_enqueue_script('ajax_blog_scripts', get_template_directory_uri() . '/assets/js/blog-scripts.js', array(), false, true );
wp_localize_script('ajax_blog_scripts', 'ajaxurl', admin_url('admin-ajax.php') );

// Initiating Ajax Load More Posts Function
function loadmore_blog_posts() {

    $count = $_POST["count"];
    $cpt = 1;
    $args = array(
        'posts_per_page' => -1,
        'post_type'   => 'post', // change the post type if you use a custom post type
        'post_status' => 'publish',
    );

    $blog_posts = new WP_Query( $args );

    if( $blog_posts->have_posts() ) {
        while( $blog_posts->have_posts() ) {
            $blog_posts->the_post();

            if( $cpt > $count && $cpt < $count+3 ) {

                <article id="post-<?php the_ID(); ?>" <?php post_class('post-item'); ?>>
                    Post Content...
                </article>

            <?php }
            $cpt++;
        }
    }

    die();
}
add_action( 'wp_ajax_load_more_posts', 'loadmore_blog_posts' );
add_action( 'wp_ajax_nopriv_load_more_posts', 'loadmore_blog_posts' );

blog-scripts.js

// Load Next Posts via AJAX Request
$('#blog-section .load-more-btn').click(function() {

    // Adding Loading Posts spinner on click
    var $btn = $(this).button('loading');

    // Sending Ajax Request for getting more Posts
    $.post(ajaxurl, {

        'action': 'load_more_posts',
        'count': $('article.post-item').length

    }, function(response) {

        $('#blog-section .blog-posts').append(response);

        $btn.button('reset');

    });

});

Loop Markup

<div class="blog-posts">

    <?php
    $args = array( 'order' => $blog_post_order, 'posts_per_page' => $blog_post_count );
    $the_query = new WP_Query( $args ); 

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

    <article id="post-<?php the_ID(); ?>" <?php post_class('post-item col-sm-6'); ?>>
        Post Content...
    </article>

    <?php wp_reset_postdata(); ?>
    <?php endwhile; else :  ?>
    <p><?php _e( 'Sorry, there is no post added so far. Please go to Dashboard and add one.', 'theme-slug' ); ?></p>
    <?php endif; ?>

</div>

Following I’ve Code Functions for Portfolio.

portfolio-scripts.php

// Enqueing Scripts for loading portfolio posts via Ajax
wp_enqueue_script('ajax_portfolio_scripts', get_template_directory_uri() . '/assets/js/portfolio-scripts.js', array(), false, true );
wp_localize_script('ajax_portfolio_scripts', 'ajaxurl', admin_url('admin-ajax.php') );


// Initiating Ajax Load More Posts Function
function loadmore_portfolio_posts() {

    $count = $_POST["count"];
    $cpt = 1;
    $args = array(
        'posts_per_page' => -1,
        'post_type'   => 'portfolio', // change the post type if you use a custom post type
        'post_status' => 'publish',
    );

    $portfolio_posts = new WP_Query( $args );

    if( $portfolio_posts->have_posts() ) {
        while( $portfolio_posts->have_posts() ) {
            $portfolio_posts->the_post();

            if( $cpt > $count && $cpt < $count+5 ) { ?>

                <div id="post-<?php the_ID(); ?>" <?php post_class('col-xl-2 col-lg-3 col-md-3 col-sm-4 col-xs-6 portfolio-item'); ?>>
                    Loop Content
                </div>

            <?php }

            $cpt++;
        }
    }

    die();
}
add_action( 'wp_ajax_load_more_posts', 'loadmore_portfolio_posts' );
add_action( 'wp_ajax_nopriv_load_more_posts', 'loadmore_portfolio_posts' );

portfolio-scripts.js

// Load Next Posts via AJAX Request
$('#portfolio-section .load-more-btn').click(function() {

    // Adding Loading Posts spinner on click
    var $btn = $(this).button('loading');

    // Sending Ajax Request for getting more Posts
    $.post(ajaxurl, {

        'action': 'load_more_posts',
        'count': $('div.portfolio-item').length

    }, function(response) {

        $('#portfolio-section .portfolio-items').append(response);

        $btn.button('reset');

    });

});

Loop Markup

<div class="portfolio-items">
    <?php
    $args = array( 'post_type' => 'portfolio', 'order' => $portfolio_post_order, 'posts_per_page' => $portfolio_post_count );
    $the_query = new WP_Query( $args ); 

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

    <div id="post-<?php the_ID(); ?>" <?php post_class('col-xl-2 col-lg-3 col-md-3 col-sm-4 col-xs-6 portfolio-item'); ?>>
        Loop Content
    </div>

    <?php wp_reset_postdata(); ?>
    <?php endwhile; else :  ?>
    <p><?php _e( 'Sorry, there is no post added so far. Please go to Dashboard and add one.', 'theme-slug' ); ?></p>
    <?php endif; ?>
</div>

Read more here: WordPress conflict with multiple load more posts functions on click


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: