WordPress Load More Posts onclick with ajax request jquery

1 Views

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:

Read More

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.

Post Views: 1

Related posts

1 comment

  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.

Comments are closed.