0

I found this https://stackoverflow.com/questions/33999193/wordpress-load-more-posts-onclick-with-ajax-request-jquery to load posts via Ajax.

It works great except that I would like to use a template but I can't get it to work. I tried multiple things but I'm somewhat stuck and it fails every time.

here is the JS

$("#load_more").click(function()
{
    $.post(ajaxurl,
    {
      'action': 'your_load_more',
      'count': $("article.post-item").length
    },
    function(response)
    {
      var posts = JSON.parse(response);

      for( var i = 0; i < posts.length; i++ )
      {
        if( posts[i] == "0" )
          $("#load_more").fadeOut();
        else
          $("#load_more").before(posts[i]);
      }

    });
});

and the PHP

function your_load_more()
{
    $count = $_POST["count"];

    $cpt = 1;

    $args = array(
        'posts_per_page' => -1,
        'post_type'   => 'post', 
        'post_status' => 'publish',
    );

    $articles = new WP_Query( $args );

    $ar_posts = array();

    if( $articles->have_posts() )
    {
        while( $articles->have_posts() )
        {
            $articles->the_post();

            $one_post = "";

            if( $cpt > $count && $cpt < $count+6 )
            {
                $one_post .= "<article id='" . get_the_id() . "' class='post-item'>";
                $one_post .= "<h3>" . get_the_title() . "</h3>";
                $one_post .= "</article>";

                $ar_posts[] = $one_post;

                if( $cpt == $articles->found_posts )
                    $ar_posts[] = "0";
            }
            $cpt++;
        }
    }
    echo json_encode($ar_posts);
    die();
}
add_action( 'wp_ajax_your_load_more', 'your_load_more' );
add_action( 'wp_ajax_nopriv_your_load_more', 'your_load_more' );

I tried multiple things, getting closer but I still get some gibberish html getting output before the posts. This is how far I got:

Updated JS

$("#load_more").click(function()
{
    $.post(ajaxurl,
    {
      'action': 'your_load_more',
      'count': $("article").length
    },
    function(response)
    {
      var posts = response;
        $( 'main div.wrapper' ).append( response );

      for( var i = 0; i < posts.length; i++ )
      {
        if( posts[i] == "0" )
          $("#load_more").fadeOut();
        else
          $("#load_more").before(posts[i]);
      }

    });
});

Updated PHP

function your_load_more()
{
    $count = $_POST["count"];

    $cpt = 1;

    $args = array(
        'posts_per_page' => -1,
        'post_type'   => 'post', 
        'post_status' => 'publish',
    );

    $articles = new WP_Query( $args );

    $ar_posts = array();

    if( $articles->have_posts() )
    {
        while( $articles->have_posts() )
        {
            $articles->the_post();

            $one_post = "";

            if( $cpt > $count && $cpt < $count+6 )
            {

                $ar_posts[] = get_template_part('loop','default');

                if( $cpt == $articles->found_posts )
                    $ar_posts[] = "0";
            }
            $cpt++;
        }
    }
    $ar_posts;
    die();
}
add_action( 'wp_ajax_your_load_more', 'your_load_more' );
add_action( 'wp_ajax_nopriv_your_load_more', 'your_load_more' );
``
  • 1
    get_template_part() doesn't return the template output. If you want to store the output in a variable like your $ar_posts array, you'd want to use output buffering. – Sally CJ May 22 at 14:33
  • I've ready such thing about buffering but I'm not sure about this. I hacked it further and managed to find a solution though it broke the condition about hiding the button if there are no more posts. – flintsburg May 23 at 18:42

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.