WordPress
October 12, 2021

How to Load More Post With Ajax in WordPress

Create a load more button to show additional posts or custom post types using AJAX following code in your current theme.

1. Set load more button in your post loop and pass paged parameter in post argument.

‘post’,
‘post_status’ => ‘publish’,
‘posts_per_page’ => ‘2’,
‘paged’ => 1,
);
$blog_posts = new WP_Query( $args ); ?>
have_posts() ) : ?>

have_posts() ) : $blog_posts->the_post(); ?>


max_num_pages > 1 ) : ?>
Load More

This will display two post per page.

2. Then you have to add the following code in your functions.php file.

admin_url( ‘admin-ajax.php’ ),
‘security’ => wp_create_nonce( ‘wc_load_more_posts’ ),
);
wp_localize_script( ‘custom-script’, ‘blog’, $script_data_array );
// Enqueued script with localized data.
wp_enqueue_script( ‘custom-script’ );
}

add_action(‘wp_ajax_load_posts_by_ajax’, ‘load_posts_by_ajax_callback’);
add_action(‘wp_ajax_nopriv_load_posts_by_ajax’, ‘load_posts_by_ajax_callback’);

function load_posts_by_ajax_callback() {
check_ajax_referer(‘wc_load_more_posts’, ‘security’);
$paged = $_POST[‘page’];
$args = array(
‘post_type’ => ‘post’,
‘post_status’ => ‘publish’,
‘posts_per_page’ => ‘2’,
‘paged’ => $paged,
);
$blog_posts = new WP_Query( $args ); ?>
have_posts() ) : ?>
have_posts() ) : $blog_posts->the_post(); ?>


3. Now open custom.js file and add the below code to it.

jQuery( document ).ready( function(){
var page = 2;
jQuery( function($) {
jQuery( ‘body’ ).on( ‘click’, ‘.loadmore’, function() {
var data = {
‘action’: ‘load_posts_by_ajax’,
‘page’: page,
‘security’: blog.security
};
jQuery.post( blog.ajaxurl, data, function( response ) {
if( $.trim(response) != ” ) {
jQuery( ‘.blog-posts’ ).append( response );
page++;
} else {
jQuery( ‘.loadmore’ ).hide();
jQuery( “.no-more-post” ).html( “No More Post Available” );
}
});
});
});
});

Related Post


Redirect to Checkout after add to cart WooCommerce

Redirecting the user to the checkout page when they’ve added a product to their cart. This may come in handy if you only sell one product / one product per time. The filter woocommerce_add_to_cart_redirect makes it easy to redirect user to custom page. Code goes in function.php file of your active child theme (or active […]

How to Add Excerpts to Your Pages in WordPress

you will need to add the following code to your current themes functions.php file

WordPress htaccess

The .htaccess is a distributed configuration file, and is how Apache handles configuration changes on a per-directory basis. Basic WP Multisite Subfolder Example SubDomain Example

Display Most Popular Posts by Views in WordPress

1. Store Post Views Count You will find out how to display popular posts by views in WordPress without an external plugin, and we will create this feature using few lines of code that consists of WordPress custom function and methods. So, make sure to place following code at function file, you may place the […]

Adding Custom Meta Fields to Taxonomies in WordPress

For add Custom Meta Field in taxonomy use following code in your current themes functions.php file.

Create Repeater Meta Box in WordPress

Repeatable Custom Fields in a Meta box Creating a “repeater meta-box” without a Plugin in WordPress. Add below code in your functions.php file (this file is located in your theme folder): Use below code to show metabox values from anywhere


Leave a Reply

Your email address will not be published. Required fields are marked *