Deprecated: Return type of Give\Framework\FieldsAPI\Contracts\Node::jsonSerialize() should either be compatible with JsonSerializable::jsonSerialize(): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/codexcoach.com/wp-content/plugins/give/src/Framework/FieldsAPI/Contracts/Node.php on line 29

Deprecated: DateTime::__construct(): Passing null to parameter #1 ($datetime) of type string is deprecated in /var/www/codexcoach.com/wp-includes/script-loader.php on line 333

Deprecated: Return type of Requests_Cookie_Jar::offsetExists($key) should either be compatible with ArrayAccess::offsetExists(mixed $offset): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/codexcoach.com/wp-includes/Requests/Cookie/Jar.php on line 63

Deprecated: Return type of Requests_Cookie_Jar::offsetGet($key) should either be compatible with ArrayAccess::offsetGet(mixed $offset): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/codexcoach.com/wp-includes/Requests/Cookie/Jar.php on line 73

Deprecated: Return type of Requests_Cookie_Jar::offsetSet($key, $value) should either be compatible with ArrayAccess::offsetSet(mixed $offset, mixed $value): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/codexcoach.com/wp-includes/Requests/Cookie/Jar.php on line 89

Deprecated: Return type of Requests_Cookie_Jar::offsetUnset($key) should either be compatible with ArrayAccess::offsetUnset(mixed $offset): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/codexcoach.com/wp-includes/Requests/Cookie/Jar.php on line 102

Deprecated: Return type of Requests_Cookie_Jar::getIterator() should either be compatible with IteratorAggregate::getIterator(): Traversable, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/codexcoach.com/wp-includes/Requests/Cookie/Jar.php on line 111

Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetExists($key) should either be compatible with ArrayAccess::offsetExists(mixed $offset): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/codexcoach.com/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 40

Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetGet($key) should either be compatible with ArrayAccess::offsetGet(mixed $offset): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/codexcoach.com/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 51

Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetSet($key, $value) should either be compatible with ArrayAccess::offsetSet(mixed $offset, mixed $value): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/codexcoach.com/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 68

Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetUnset($key) should either be compatible with ArrayAccess::offsetUnset(mixed $offset): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/codexcoach.com/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 82

Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::getIterator() should either be compatible with IteratorAggregate::getIterator(): Traversable, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/codexcoach.com/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 91

Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in /var/www/codexcoach.com/wp-includes/class-wp.php on line 173
How to Load More Post With Ajax in WordPress - CodeXCoach
Deprecated: parse_str(): Passing null to parameter #1 ($string) of type string is deprecated in /var/www/codexcoach.com/wp-includes/formatting.php on line 4952

Deprecated: parse_str(): Passing null to parameter #1 ($string) of type string is deprecated in /var/www/codexcoach.com/wp-includes/formatting.php on line 4952

Deprecated: ltrim(): Passing null to parameter #1 ($string) of type string is deprecated in /var/www/codexcoach.com/wp-includes/wp-db.php on line 3030

Deprecated: ltrim(): Passing null to parameter #1 ($string) of type string is deprecated in /var/www/codexcoach.com/wp-includes/wp-db.php on line 3030
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” );
}
});
});
});
});


Deprecated: ltrim(): Passing null to parameter #1 ($string) of type string is deprecated in /var/www/codexcoach.com/wp-includes/wp-db.php on line 3030

Related Post


Creating Custom Options Pages in WordPress

To create a menu for theme setting in the WordPress admin, you should use the Settings API provided by WordPress. Using this API, you can register a new options page, with fields for settings. Additionally, you can add settings to an existing options page. That being said, let’s add the following code to the main […]

Featured image metabox not appearing on custom post edit page

Sometimes theme not support featured image metabox, when put following code in your current themes functions.php file. function my_custom_theme_setup() { add_theme_support( ‘menus’ ); add_theme_support( ‘post-thumbnails’ ); // other options } add_action( ‘after_setup_theme’, ‘my_custom_theme_setup’ ); Now featured image metabox support in custom post edit page.

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 […]

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 […]

Enable Right Sidebar in WordPress all Post for Astra theme

Easy way to enable right sidebar in all wordpress post for astra theme add following code in your current themes function.php file.

Create Custom Template for Child Categories in WordPress

Create different template only for child category put following code in your current themes functions.php file


Leave a Reply

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