Load More Posts Ajax Button

Solution:1

You can add start and limit value in your ajax and receive them from php page and put it in the query I have a pre code to display user comments, you can modify it as you wish

main page

<script>
$(document).ready(function(){
 var limit = 5;
 var start = 0;
 var status = false;
function load_comments(limit, start){
  $.ajax({
   url:"view_comments.php",
   method:"POST",
   data:{limit:limit,start:start},
   cache:false,
   success:function(data){
    $('#load_comments').append(data);
    if(data == ''){
     $('#load_comm_info').html("<div>That's all comments</div>");
     status = true;
    }else{
     $('#load_comm_info').html("<button type='button'>Load more comments</button>");
     status = false;
    }
   }
  });
 }
if(status == false){
  status = true;
  load_comments(limit, start);
 }
 $("#load_comm_info").click(function(){
  if(status == false){
   status = true;
   start = start + limit;
   setTimeout(function(){
    load_comments(limit, start);
   }, 1000);
  }
 });
});
</script>

and this is page view_comments.php

<?php
if(isset($_POST["start"], $_POST["limit"])){
  $start = $_POST['start'];
  $limit = $_POST['limit'];
  $get_comments = mysqli_prepare($dmgsf_connect, "SELECT * FROM `comments` ORDER BY `id` DESC LIMIT ?, ?");
  mysqli_stmt_bind_param($get_comments, 'ii',$start,$limit);
  mysqli_stmt_execute($get_comments);
  $get_comments_res = mysqli_stmt_get_result($get_comments);
  $get_comments_num = mysqli_num_rows($get_comments_res);
  mysqli_stmt_close($get_comments);
  if($get_comments_num > 0){ ?>
    <?php while($get_comments_rows = mysqli_fetch_assoc($get_comments_res)){ ?>
      <div>
        <span><?php echo $get_comments_rows['comment'];?></span>
      </div>
    <?php }
  } 
}
?>

Solution:2

The benefit of this is that it will improve the page-load of the particular page as it will only be displaying a certain amount of posts before having to load any more of the content (especially when you are loading images).

So let’s get started…

So the first thing that you should have is a list of posts to display on the frontend as follows:-

    <div id="ajax-posts" class="row">
        <?php
            $postsPerPage = 3;
            $args = array(
                    'post_type' => 'post',
                    'posts_per_page' => $postsPerPage,
            );

            $loop = new WP_Query($args);

            while ($loop->have_posts()) : $loop->the_post();
        ?>

         <div class="small-12 large-4 columns">
                <h1><?php the_title(); ?></h1>
                <p><?php the_content(); ?></p>
         </div>

         <?php
                endwhile;
        wp_reset_postdata();
         ?>
    </div>
    <div id="more_posts">Load More</div>

Then you want to add the following code in your functions.php file where you register the scripts:

	wp_localize_script( 'core-js', 'ajax_posts', array(
	    'ajaxurl' => admin_url( 'admin-ajax.php' ),
	    'noposts' => __('No older posts found', 'twentyfifteen'),
	));	

To further explain this, in my example I enqueue scripts as follows:

wp_register_script( 'core-js', get_template_directory_uri() . '/assets/js/core.js');
wp_enqueue_script( 'core-js' );

wp_localize_script( 'core-js', 'ajax_posts', array(
    'ajaxurl' => admin_url( 'admin-ajax.php' ),
    'noposts' => __('No older posts found', 'twentyfifteen'),
));

Firstly, you would enqueue the file where you will be adding the JS code to, then you will add the wp_localize_script code after you have enqueued the core.js file. This has to be done like this otherwise you will get an error such as Can’t find variable: ajax_posts.

NOTE: You will need to replace code-js with the file you are going to be adding the JS code later in this tutorial.

We added it to a file called core.js, and the reason we added code-js is that we enqueued the script as follows:

	wp_register_script( 'core-js', get_template_directory_uri() . '/assets/js/core.js');
	wp_enqueue_script( 'core-js' );

Right after the existing wp_localize_script. This will load WordPress own admin-ajax.php so that we can use it when we call it in our ajax call.

At the end of the functions.php file, you need to add the function that will load your posts:-

function more_post_ajax(){

    $ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 3;
    $page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;

    header("Content-Type: text/html");

    $args = array(
        'suppress_filters' => true,
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'paged'    => $page,
    );

    $loop = new WP_Query($args);

    $out = '';

    if ($loop -> have_posts()) :  while ($loop -> have_posts()) : $loop -> the_post();
        $out .= '<div class="small-12 large-4 columns">
                <h1>'.get_the_title().'</h1>
                <p>'.get_the_content().'</p>
         </div>';

    endwhile;
    endif;
    wp_reset_postdata();
    die($out);
}

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

The final part is the ajax itself. In core.js or your main JavaScript/jQuery file, you need to input inside the $(document).ready(); environment the following code:-

var ppp = 3; // Post per page
var pageNumber = 1;


function load_posts(){
    pageNumber++;
    var str = '&pageNumber=' + pageNumber + '&ppp=' + ppp + '&action=more_post_ajax';
    $.ajax({
        type: "POST",
        dataType: "html",
        url: ajax_posts.ajaxurl,
        data: str,
        success: function(data){
            var $data = $(data);
            if($data.length){
                $("#ajax-posts").append($data);
                //$("#more_posts").attr("disabled",false); // Uncomment this if you want to disable the button once all posts are loaded
                $("#more_posts").hide(); // This will hide the button once all posts have been loaded
            } else{
                $("#more_posts").attr("disabled",true);
            }
        },
        error : function(jqXHR, textStatus, errorThrown) {
            $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
        }

    });
    return false;
}

$("#more_posts").on("click",function(){ // When btn is pressed.
    $("#more_posts").attr("disabled",true); // Disable the button, temp.
    load_posts();
    $(this).insertAfter('#ajax-posts'); // Move the 'Load More' button to the end of the the newly added posts.
});

With the above code, you should now have a load more button at the bottom of your posts, and once you click this it will display further posts. This can also be used with CTP (custom post type).