<?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 :)
<?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 :)
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'
) );
}