0
    <?php
    /*

    @package subhasishlive theme

        ========================
            AJAX FUNCTIONS
        ========================
    */

    add_action( 'wp_ajax_nopriv_sunset_load_more', 'sunset_load_more' );
    add_action( 'wp_ajax_sunset_load_more', 'sunset_load_more' );
    function sunset_load_more() {

    $paged = $_POST["page"]+1;

    $query = new WP_Query( array(
        'post_type' => 'Allkitchenposts',
        'order' => 'DESC',
        'post_status'    => 'publish',
        'paged' => $paged,
        'posts_per_page' => '10'
    ) );

    if( $query->have_posts() ):

        while( $query->have_posts() ): $query->the_post();

            // get_template_part( 'template-parts/content', get_post_format() );
        ?>

              <div class="col-sm-6 single-post-news">
                <div class="single-post-content">
                  <div class="post-box reveal-block text-left">
                    <div class="post-box-img-wrap">
                        <a href="<?php the_permalink(); ?>">
                        <?php 
                        if (has_post_thumbnail( get_the_ID() ) ){
                            $image = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'single-post-thumbnail' );
                            ?>
                            <img src="<?php echo $image[0]; ?>" alt="" class="img-responsive"/>
                        <?php
                        }else{
                        ?>

                        <img src="<?php bloginfo('template_directory'); ?>/img/news-thumb-01.jpg" class="img-responsive" />

                        <?php
                        }
                        ?>  

                        </a>
                    </div>
                    <div class="post-box-caption">
                      <div class="post-box-title text-ubold"><a href="<?php the_permalink(); ?>" class="text-gray-base"><?php the_title(); ?></a></div>
                      <ul class="list-inline post-box-meta list-inline-dashed list-inline-dashed-xs text-extra-small-10 offset-top-12 text-silver-chalice">
                        <li class="text-uppercase"><?php echo meks_time_ago(); ?></li>
                        <li class="p text-uppercase"><span>by <a href="testimonials.html"><?php the_author(); ?></a></span></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>


        <?php
        endwhile;

    endif;

    wp_reset_postdata();

    die();

}

?>

Instead of 'post_type' => 'Allkitchenposts' I want to make this value dynamic based on my post type so that I can load content with ajax in different archive page just like I did bellow in archive-Allkitchenposts.php

      <div class="col-xs-12 text-center">
        <a class="btn btn-lg btn-default sunset-load-more" data-page="1" data-url="<?php echo admin_url('admin-ajax.php'); ?>">Load More...</a>
      </div>

following is my ajax-load.js file

jQuery(document).ready( function($){


$(document).on('click','.sunset-load-more', function(){

// this refers to the button itself
var that = $(this);
// reference to the data-page attribute value of the button
var page = $(this).data('page');
// next page reference
var newPage = page+1;
// reference to the data-url attribute value of the button
var ajaxurl = that.data('url');


$.ajax({

url : ajaxurl,
type : 'post', // post method of retriving data
data : {

    page : page,
    action: 'sunset_load_more'

},
error : function( response ){
    console.log(response);
},
success : function( response ){

    that.data('page', newPage);
    $('.sunset-posts-container').append( response );

}

});
});
});

I want to know how to load more posts by ajax for differet custom post type archive pages ???? Currently I'm only able to do it for one post type only. Thanks :)

1

I used this on single-{post-type} .

$t_slug = get_query_var('post_type');

 <div class="col-xs-12 text-center">
        <a class="btn btn-lg btn-default sunset-load-more" data-page="1" post_type =<?php echo $t_slug ;?> data-url="<?php echo admin_url('admin-ajax.php'); ?>">Load More...</a>
  </div>

jQuery(document).ready( function($){


$(document).on('click','.sunset-load-more', function(){
var post_type = $(this).attr('post_type');
// this refers to the button itself
var that = $(this);
// reference to the data-page attribute value of the button
var page = $(this).data('page');
// next page reference
var newPage = page+1;
// reference to the data-url attribute value of the button
var ajaxurl = that.data('url');


$.ajax({

url : ajaxurl,
type : 'post', // post method of retriving data
data : {

    post_type : post_type ,
    page : page,
    action: 'sunset_load_more'

},
error : function( response ){
    console.log(response);
},
success : function( response ){

    that.data('page', newPage);
    $('.sunset-posts-container').append( response );

}

});
});
});


function sunset_load_more() {
$post_type = $_POST['post_type'];
    $paged = $_POST["page"]+1;

    $query = new WP_Query( array(
        'post_type' => ' $post_type',
        'order' => 'DESC',
        'post_status'    => 'publish',
        'paged' => $paged,
        'posts_per_page' => '10'
    ) );
}
  • Yes your code is right, except for one thing.Instead of 'post_type' => 'Allkitchenposts', we have to write 'post_type' => $post_type :) But thanks. – Subhasish Nath Dec 29 '18 at 14:46
  • Cheers! edited . :) – Techno Deviser Dec 31 '18 at 6:51

Your Answer

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

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