I am developing a WordPress magazine theme, and I have a category post widget for the homepage where posts are filtered with category and total number of posts. I wanted to add the load more option for each category post widget to load more post with ajax request on that widget and everything is fine. I have added load more button at bottom of post list in that widget.

So far, if user has set the total number of posts to display ‘n’ number and category from where to retrieve post ‘x’ category name in widget for homepage(back-end). Whenever user clicks on ‘Load more’ button(front-end) I have passed that total number and category name set by user dynamically from the HTML 5 data attribute to ajax and retrieve that value by ‘POST’ method in my another Php file where I have function to load the post every time user clicks.

Everything is working so great till here.

So my problem is if I use that same widget more than one time in my homepage widget section and set the different category name and total number of post it works but when I click load more button both the widget are loaded with same post.

Example: If I have 3 post in widget one from category ‘A’ and 4 post in widget two from category ‘B’.
If I click the load more button in widget one it will add 3 more post from category ‘A’ but also add 3 more post from category ‘A’ in widget two.

So how can I avoid this issue?

Load More Button Code with data attribute:

$tot and $cat are variable of total number and category from the widget.

<a class="load-btn load-more" data-page="1" data-url="<?php echo admin_url('admin-ajax.php'); ?>" data-tot="<?php echo $tot; ?>" data-cat="<?php echo $cat; ?>">
       <span class="btn-text">Load More</span>
</a>        

Ajax Code:

$(document).on('click','.load-more', function(){
    var that = $(this);
    var page = that.data('page');
    var newPage = page+1;
    var ajaxurl = that.data('url');
    var total = that.data('tot');
    var category = that.data('cat');

    $.ajax({
        url : ajaxurl,
        type : 'post',
        data : {
            page : page,
            action: 'load_more',
            tot : total,
            cat : category
        }, 

        error : function( response ){
            console.log(response);
        },
        success : function( response ){
            that.data('page', newPage);
            $('.widget-section').append(response);

        }
    });
});

.widget-section is the wrapper for my widget posts lists.

Php Function called by ajax:

add_action( 'wp_ajax_nopriv_load_more', 'load_more' );
add_action( 'wp_ajax_load_more', 'load_more' );

function load_more(){
  $paged = $_POST["page"]+1;
  $totalno = $_POST["tot"];
  $category = $_POST["cat"];
  $postss = new WP_Query( array(
        'post_type'        => 'post',
        'paged'            => $paged,
        'posts_per_page'   => $totalno,
        'cat'              => $category
  ) );
  if( $postss->have_posts() ): 

        while( $postss->have_posts() ): $postss->the_post(); 
        ?>

       // My html structure

        <?php

        endwhile; 

    endif; 

   wp_reset_postdata();
   die();
   }

Thank you :)

Read more here: Use ajax to load more content in category post widget, but post duplication issue whenever same widget is used twice in widget section


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: