Wordpress Load More Posts onclick with ajax reques

Question

I've developed custom theme from scratch with _S starter theme. I'm having issue getting Wordpress next posts via ajax request on click on read more button. I've tried many articles specifically the following articles, but no luck.

Reference Links:

• Load More Posts Ajax Button in Wordpress
  
• Load Next WordPress Posts With AJAX
  
• Load Old WordPress Posts on the Same Page with AJAX

I've tried going with above custom loops and adding custom functions with jquery script but it don't work somehow.

Here is loop code example below:

Loop in index.php

<?php query_posts('showposts=5'); if (have_posts()) : while (have_posts()) : the_post(); ?>

    <article class="post-item">
        <h2><?php the_title(); ?></h2>
        <?php the_excerpt(); ?>
    </article>

<?php endwhile; ?>
<?php else : ?>

    <h2>Sorry no posts are created yet.</h2>
    <p>Please create some posts to see it in action.</p>

<?php endif; wp_reset_query(); ?>

<button class="load-more-btn">Load More</button>

I'm messing with this issue for over 4-5 days, so any one can help me out with this issue with working solution will be highly appreciable.

Thanks in advance.

Answer 1

I maybe have a solution for your.

First be sure to have a script enqueue in your theme

wp_enqueue_script('your_js_hanlde', get_template_directory_uri() . '/js/your_js_hanlde.js', array('jquery'), '1.0.0', true );

then localize add a function to add a js var in your dom

wp_localize_script('your_js_hanlde', 'ajaxurl', admin_url( 'admin-ajax.php' ) );

In your js, add an event on 'click' on your 'Load More' button

Pass an action name and the count of article you have in your dom, the response add the content before your button 'load more'

$("#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]);
      }

    });
});

create a function in your functions.php

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

    $cpt = 1;

    $args = array(
        'posts_per_page' => -1,
        'post_type'   => 'post', // change the post type if you use a custom post type
        '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' );

It work for me. I hope that help you.