Updated: 22/09/2021 – Further clarification has been added on the setup of this script.
In today’s post, we will show you how to create a load more button to show additional posts or custom post types using AJAX.
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).
How to add Infinite Load, instead of Click
You can also load the rest of the posts automatically on scroll instead of having to click on a button. This can be achieved by making it invisible by setting the visibility to hidden.
The following code will run the load_posts() function when you’re 100px from the bottom of the page. So instead of the click function we added we would use:
$(window).on('scroll', function(){
if($('body').scrollTop()+$(window).height() > $('footer').offset().top){
if(!($loader.hasClass('post_loading_loader') || $loader.hasClass('post_no_more_posts'))){
load_posts();
}
}
});
Do note that there is a drawback to this. With this method, you could never scroll the value of $(document).height() - 100 or $('footer').offset().top, If that should happen, just increase the number where the scroll goes to.
You can easily check it by putting console.log in your code and see in the inspector what they throw out like so:
$(window).on('scroll', function () {
console.log($(window).scrollTop() + $(window).height());
console.log($(document).height() - 100);
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
load_posts();
}
});
Adjust the settings accordingly and you will get this working to your desire in no time!
If you need any help with this, feel free to get in touch in the comment below. If you need help with this, just drop me a message and I’ll be more than happy to help you!
Sponsor
If you have come this far and you’re a fan of Football, check out our sponsor below; The FPL Way. We have just created an excellent tool for them; The FPL Planner.
They will help you become the king of your FPL mini-leagues!
Fantasy Premier League – Gain the FPL advantage you deserve