0

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 );
            }
        })

    });

Single Post with Next Post Button

Alert box from Js showing 0

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

Your Answer

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

Browse other questions tagged or ask your own question.