Outsource WordPress Development
Blazingcoders: Your Ideal WordPress Development Partner Our specialty at Blazingcoders is providing premium, tailored WordPress development services. Our team is capable of managing projects of any
Read More
In this article we will show you how to create a load more button to show more posts or custom post types using AJAX. In this way we can show more post without loading a page. Loading speed of the page will be increased
Follow the step by step process to implement Ajax based load more option
Create a Template file in wordpress where you can add client code
$postsperpage = 3;
$args = array(
'post_type' => 'post',
'posts_per_page' => $postsperpage,
);
$loop = new WP_Query($args);
while ($loop->have_posts()) : $loop->the_post();
?>
endwhile;
wp_reset_postdata();
?>
Load More
Step 2: Add Ajax script in Template file
Add the ajax call function in Template file. Use the ajax call in Document ready function
$document.ready(function({
var p = 3; // Post per page
var pageNo = 1;
function load_posts(){
pageNo++;
var str = '&pageNo=' + pageNo + '&p=' + p + '&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-load-posts").append($data);
$("#load_more_posts").attr("disabled",false);
} else{
$("#load_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.
});
});
Step 3: Add following in Function.php file
Then you want to add the following code in your
functions.php
wp_localize_script( 'core-js', 'ajax_posts', array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'noposts' => __('No older posts found', 'blazingcoders'),
));
After adding
wp_localize_script
load the default admin-ajax.php so that we can use in our ajax call and also add code.js function to register the script.
wp_register_script( 'core.js', get_template_directory_uri() . '/assets/js/core.js');
wp_enqueue_script( 'core.js' );
At last add the following code in
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 .= '
'.get_the_title().'
'.get_the_content().'
';
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');
Step 4: Infinity Scroll
Add the infinity scroll function below function is used to load infinity scroll
$(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();
}
}
});
Request a FREE Business Plan.
Blazingcoders: Your Ideal WordPress Development Partner Our specialty at Blazingcoders is providing premium, tailored WordPress development services. Our team is capable of managing projects of any
Read MoreBeing among the Stylish Magento B2B Development Company, We give important gests and optimal arrangements unequivocal to customer particulars and administrations to vend and gauge any business-to-busi
Read MoreWordPress is a beat Content management System website that provides more than a blog. Users can create any type of website with the WordPress CMS. In WordPress, the most powerful feature is custom pos
Read More