I have an archive of custom post type "Trivia" where I want to display next custom posts on click of a button "Next Post"
I have this code for displaying 1 post on archive page:
$query_vars = array(
'post_type' => array( 'trivia' ),
'post_status' => array( 'publish' ),
'order' => 'DESC',
'orderby' => 'date',
//'nopaging' => true,
'posts_per_page' => '1',
'posts_per_archive_page' => '1',
'post__not_in' => array($recentPost )
);
// The Query
$query = new WP_Query( $query_vars );
//OLD LOOp
$recentPost = [];
$maxPosts = $query->post_count;
$startPost;
$currentPost = $query->current_post;;
$adSpace = $currentPost+5;
// The Loop
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
// do something
echo the_content();
if ($currentPost < $maxPosts){
// /printf ($currentPost."</br>");
$currentPost++;
?>
<?php
if($currentPost % 5 === $adSpace){
echo "Ad Space</br>";
?>
</div>
<?php
}
} else {
// no posts found
}
// Restore original Post Data
wp_reset_postdata();?>
<button type="button" name="button" class="nextPostbtn">Next Posts</button>
I want to load the next posts using ajax on click of this button
// Restore original Post Data
wp_reset_postdata();?>
<button type="button" name="button" class="nextPostbtn">Next Posts</button>
And for that I have enqueued & localized script using following code:
global $wp_query;
wp_enqueue_script( 'myajax_script', get_stylesheet_directory_uri().'/js/main.js', array( 'jquery' ), '1.0.7', true );
wp_localize_script( 'myajax_script', 'ajaxpagination', array(
'alert' => "local script added",
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'query_vars' => json_encode( $wp_query->query ),
));
This is my Js which is inside my main.js which is already enqueue and working fine
$('.nextPostbtn').click( function(){
function find_page_number( element ) {
element.find('span').remove();
return parseInt( element.html() );
}
page = find_page_number( $(this).clone() );
//alert(ajaxpagination.query_vars);
$.ajax({
url: ajaxpagination.ajaxurl,
type: 'POST',
data: {
action: 'get_ajax_posts',
query_vars: ajaxpagination.query_vars,
page: page
},
beforeSend: function() {
$('#content').find( 'article' ).remove();
$('#content').append( '<div class="page-content" id="loader">Loading New Posts...</div>' );
},
success: function( data ) {
$('#content #loader').remove();
$('#content').append( data );
alert( data );
}
})
});
Please help me to achieve the desired result using ajax.
I am new to WordPress ajax & tring to make this work from last 2 days
You help will be highly appreciated
Thanks in advance