To fix the pagination issues with AJAX requests in WordPress, we'll need to modify the way we handle the pagination functionality. Here's a step-by-step guide to address the common problems:
-
Enqueue the AJAX Script and Localize the Query Variables:
In your functions.php
file, add the following code to enqueue the AJAX script and localize the query variables:
function custom_assets_39828328() {
// Correct the path and js file name before using.
wp_enqueue_script('ajax-pagination', get_stylesheet_directory_uri() . '/js/ajax-pagination.js', array(), '1.0', true);
global $wp_query;
wp_localize_script('ajax-pagination', 'ajaxpagination', array(
'ajaxurl' => admin_url('admin-ajax.php'),
'query_vars' => json_encode($wp_query->query)
));
}
add_action('wp_enqueue_scripts', 'custom_assets_39828328');
This code will enqueue the AJAX script and make the ajaxurl
and query_vars
available to the JavaScript file.
-
Create the AJAX Callback Function:
In your functions.php
file, add the following code to create the AJAX callback function:
function my_ajax_pagination_72372732() {
$query_vars = json_decode(stripslashes($_POST['query_vars']), true);
$query_vars['post_type'] = 'tour';
$query_vars['paged'] = $_POST['page'];
$query_vars['post_status'] = 'publish';
$query_vars['posts_per_page'] = 3;
$posts = new WP_Query($query_vars);
$GLOBALS['wp_query'] = $posts;
if (!$posts->have_posts()) {
echo 'No results found';
} else {
while ($posts->have_posts()) {
$posts->the_post();
?>
<span> <?php the_title(); ?> </span><br>
<?php
}
echo paginate_links(array('total' => $posts->max_num_pages));
}
die();
}
add_action('wp_ajax_nopriv_ajax_pagination', 'my_ajax_pagination_72372732');
add_action('wp_ajax_ajax_pagination', 'my_ajax_pagination_72372732');
This function will handle the AJAX request and generate the paginated content, including the pagination links.
-
Implement the AJAX Pagination in JavaScript:
Create a new JavaScript file (e.g., ajax-pagination.js
) and add the following code:
(function($) {
function find_page_number(element) {
element.find('span').remove();
return parseInt(element.html());
}
$(document).on('click', 'a.page-numbers', function(event) {
event.preventDefault();
page = find_page_number($(this).clone());
$.ajax({
url: ajaxpagination.ajaxurl,
type: 'post',
data: {
action: 'ajax_pagination',
query_vars: ajaxpagination.query_vars,
page: page
},
success: function(html) {
$('#page-posts-wrapper').empty();
$('#page-posts-wrapper').append(html);
}
})
})
})(jQuery);
This JavaScript code will handle the pagination links' click events, send the AJAX request, and update the content on the page.
-
Modify the PHP Code to Use the AJAX Functionality:
In your page.php
file, update the code as follows:
<div class="site-content clearfix">
<h1>Alex Blog</h1>
<div id="page-posts-wrapper">
<?php
$ourCurrentPage = get_query_var('paged');
$aboutPosts = new WP_Query(array(
'post_type' => 'tour',
'post_status' => 'publish',
'posts_per_page' => 3,
));
if ($aboutPosts->have_posts()) :
while ($aboutPosts->have_posts()) :
$aboutPosts->the_post();
?>
<span> <?php the_title(); ?> </span>
<br>
<?php endwhile;
echo paginate_links(array(
'total' => $aboutPosts->max_num_pages
));
endif;
?>
</div>
</div>
The key changes here are:
- Adding the
<div id="page-posts-wrapper">
wrapper around the content to be loaded via AJAX.
- Removing the
paged
parameter from the WP_Query
arguments, as we'll be handling the pagination through the AJAX request.
Now, when users click on the pagination links, the AJAX request will be triggered, and the content will be loaded dynamically without a full page refresh.
By following these steps, you should be able to fix the pagination issues with AJAX requests in your WordPress website. Remember to test thoroughly and make any necessary adjustments to fit your specific use case.
If you're looking for a comprehensive solution to manage your website's conversion rates, you might want to check out Flowpoint.ai. Flowpoint provides advanced analytics and AI-powered recommendations to help you identify and fix technical, UX, and content-related issues that impact your website's performance.