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


Remove Version From CSS & JS in WordPress

Let’s start with removing versions from style and scripts. To do so, add the code below in your active theme’s functions.php file. After adding script on functions.php file you can view the source of any pages version should be removed from all your styles and scripts. You can also remove version from WordPress Head and […]

WordPress Login Form Without Plugin

Are you need simple login form without plugin for your WordPress website? Yes, Then i have created [wc_login_form] shortcode with quick simple code. So you can put login form anywhere like in Pages, Posts and Widget etc… Therefore you just need to put [wc_login_form] shortcode where you need login form. So you need to follow […]

Get product details from $product object WooCommerce

I am publish this article for get values from WooCommerce $product object. You can get all information of product from $product object. When we have $product object. Get $product object by $product_id. Get $order object by $order_id. Get products from $cart object.

Prevent svg translation of fontawesome icon

Add Following script in head so use below code in your current themes header.php file. And also you have to add following script before your fontawesome css link.

How to Create Custom Post Type in WordPress

Custom post types are same like posts and pages. By default WordPress comes with a few different post types which are all stored in the database under the wp_posts table. Default Post Types Posts Pages Attachments Revisions Navigation Menus Custom CSS Changesets We can create your own custom post types and call them whatever we […]

How to Include JavaScript & CSS in WordPress

When we are customizing any wordpress theme using child theme at some time we need to enqueue any external CSS or JavaScript in site. In this case we can best way to include css and JavaScript in functions.php file. We can enqueue the JavaScript or CSS using wp_enqueue_script() or wp_enqueue_style() functions. CSS You can enqueue […]


Leave a Reply

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