Skip to content

Instantly share code, notes, and snippets.

@krystyna93
Created June 16, 2023 14:08
Show Gist options
  • Save krystyna93/9bccd4d35c2fb706b43560d6a0e00cc5 to your computer and use it in GitHub Desktop.
Save krystyna93/9bccd4d35c2fb706b43560d6a0e00cc5 to your computer and use it in GitHub Desktop.
WordPress 'Load More' Functionality with Ajax
<?php
function load_more_scripts() {
wp_enqueue_script( 'load-more', get_stylesheet_directory_uri() . '/js/load-more.js', array('jquery'), '1.0', true );
wp_localize_script( 'load-more', 'load_more_params', array(
'ajax_url' => esc_url( admin_url( 'admin-ajax.php' ) ),
'security' => wp_create_nonce( 'load_more_security' ),
));
}
add_action( 'wp_enqueue_scripts', 'load_more_scripts' );
function load_more_posts() {
check_ajax_referer( 'load_more_security', 'security' );
$paged = $_POST['page'];
$post_type = isset($_POST['post_type']) ? $_POST['post_type'] : 'post';
$query_args = array(
'post_type' => $post_type,
'post_status' => 'publish',
'posts_per_page' => 5,
'paged' => $paged,
);
if (is_archive()) {
$query_args['post_type'] = get_queried_object()->name;
}
$query = new WP_Query($query_args);
ob_start();
while ( $query->have_posts() ) : $query->the_post();
// Output your post content here
endwhile;
$data = ob_get_clean();
wp_send_json_success( $data );
}
add_action( 'wp_ajax_load_more_posts', 'load_more_posts' );
add_action( 'wp_ajax_nopriv_load_more_posts', 'load_more_posts' );
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$query = new WP_Query( array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 5,
'paged' => $paged,
));
?>
<div id="post-container">
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<!-- Output your post content here -->
<?php endwhile; ?>
</div>
<?php if ($query->max_num_pages > 1) : ?>
<div id="load-more-wrapper">
<a href="#" class="load-more" data-nonce="<?php echo wp_create_nonce( 'load_more_security' ); ?>" data-page="<?php echo $paged; ?>" data-post-type="<?php echo $query->query_vars['post_type']; ?>">Load More Posts</a>
</div>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
jQuery(document).ready(function($) {
$('#load-more-wrapper').on('click', '.load-more', function(e) {
e.preventDefault();
var nextlink = $(this).attr('href');
var nonce = $(this).data('nonce');
var page = parseInt($(this).data('page'));
var post_type = $(this).data('post-type');
var loading = '<div class="loading-indicator"><span>Loading...</span></div>';
$(this).replaceWith(loading);
$.ajax({
url: load_more_params.ajax_url,
type: 'POST',
dataType: 'json',
data: {
action: 'load_more_posts',
security: load_more_params.security,
page: page + 1,
post_type: post_type,
},
success: function(response) {
if (response.success) {
$('#post-container').append(response.data);
$('#load-more-wrapper').html('<a href="#" class="load-more" data-nonce="' + nonce + '" data-page="' + (page + 1) + '" data-post-type="' + post_type + '">Load More Posts</a>');
} else {
console.log(response.data);
}
},
});
});
});
/* code uses WordPress's wp_localize_script() function to pass the AJAX URL and the security token to the JavaScript code,
and verifies it using the check_ajax_referer() function to prevent unauthorized access to your server.
Also replaces the load more button with a loading indicator while waiting for the response from the server.
Once the response is received, it appends the new posts to the container and creates a new load more button with the updated page */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment