Load More Posts AJAX
—
### 1. **Modify WordPress Theme Functions**
Add a custom AJAX handler to load more posts.
#### Add the Code to `functions.php`
function load_more_posts_ajax() {
// Check nonce for security
check_ajax_referer('load_more_posts_nonce', 'nonce');
// Query for posts
$paged = isset($_POST['page']) ? intval($_POST['page']) : 1;
$query_args = [
'post_type' => 'post',
'posts_per_page' => 5, // Change to your desired posts per page
'paged' => $paged,
];
$query = new WP_Query($query_args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
// Customize your post layout here
echo '<div class="post">';
echo '<h2>' . get_the_title() . '</h2>';
echo '<p>' . get_the_excerpt() . '</p>';
echo '</div>';
}
} else {
echo '<p>No more posts to load.</p>';
}
wp_die(); // Required to terminate properly
}
add_action('wp_ajax_load_more_posts', 'load_more_posts_ajax');
add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts_ajax');—
### 2. **Enqueue Scripts**
Pass data (e.g., the AJAX URL) to your JavaScript file.
#### Add This to `functions.php`
function enqueue_load_more_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script(
'load-more',
get_template_directory_uri() . '/js/load-more.js',
['jquery'],
null,
true
);
wp_localize_script('load-more', 'load_more_params', [
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('load_more_posts_nonce'),
]);
}
add_action('wp_enqueue_scripts', 'enqueue_load_more_scripts');—
### 3. **Create `load-more.js`**
Handle the button click and AJAX request.
#### JavaScript File (`/js/load-more.js`)
jQuery(document).ready(function($) {
let page = 2; // Start from page 2 since page 1 is already loaded
const loadMoreBtn = $('#load-more-btn');
loadMoreBtn.on('click', function(e) {
e.preventDefault();
$.ajax({
url: load_more_params.ajax_url,
type: 'POST',
data: {
action: 'load_more_posts',
nonce: load_more_params.nonce,
page: page,
},
beforeSend: function() {
loadMoreBtn.text('Loading...'); // Optional loading state
},
success: function(response) {
if (response.trim() !== '<p>No more posts to load.</p>') {
$('#posts-container').append(response);
page++;
loadMoreBtn.text('Load More');
} else {
loadMoreBtn.text('No More Posts').prop('disabled', true);
}
},
error: function() {
loadMoreBtn.text('Error Loading Posts');
}
});
});
});—
### 4. **Update Theme Template**
Add the HTML structure for posts and the "Load More" button.
#### Example Template Code (e.g., `index.php`)
<div id="posts-container">
<?php
// Display initial posts
$query = new WP_Query([
'post_type' => 'post',
'posts_per_page' => 5, // Matches the AJAX query
]);
if ($query->have_posts()) :
while ($query->have_posts()) : $query->the_post();
?>
<div class="post">
<h2><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?></p>
</div>
<?php
endwhile;
wp_reset_postdata();
endif;
?>
</div>
<button id="load-more-btn">Load More</button>—
### Summary
1. Add an AJAX handler to load posts (`functions.php`).
2. Enqueue a script and pass WordPress AJAX URL and nonce.
3. Create a jQuery script to handle button clicks and send requests.
4. Structure the HTML and initial post display in the template.
This will dynamically load more posts without refreshing the page!
—
### Steps to Implement "Load More on Scroll"
#### 1. **Modify WordPress Theme Functions**
Use AJAX to fetch posts when the user scrolls.
##### Add the Code to `functions.php`
function load_more_posts_ajax() {
check_ajax_referer('load_more_posts_nonce', 'nonce');
$paged = isset($_POST['page']) ? intval($_POST['page']) : 1;
$query_args = [
'post_type' => 'post',
'posts_per_page' => 5, // Number of posts per page
'paged' => $paged,
];
$query = new WP_Query($query_args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
?>
<div class="post">
<h2><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?></p>
</div>
<?php
}
} else {
echo 'no_more_posts'; // Signal the end of posts
}
wp_die(); // Properly terminate the script
}
add_action('wp_ajax_load_more_posts', 'load_more_posts_ajax');
add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts_ajax');—
#### 2. **Enqueue Scripts**
Pass AJAX parameters to the JavaScript file.
##### Add This to `functions.php`
function enqueue_load_more_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script(
'scroll-load-more',
get_template_directory_uri() . '/js/scroll-load-more.js',
['jquery'],
null,
true
);
wp_localize_script('scroll-load-more', 'load_more_params', [
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('load_more_posts_nonce'),
]);
}
add_action('wp_enqueue_scripts', 'enqueue_load_more_scripts');—
#### 3. **Create `scroll-load-more.js`**
Handle scroll events and AJAX requests.
##### JavaScript File (`/js/scroll-load-more.js`)
jQuery(document).ready(function($) {
let page = 2; // Start from page 2 since page 1 is already loaded
let isLoading = false;
$(window).on('scroll', function() {
// Check if the user is near the bottom of the page
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 200) {
if (!isLoading) {
isLoading = true;
$.ajax({
url: load_more_params.ajax_url,
type: 'POST',
data: {
action: 'load_more_posts',
nonce: load_more_params.nonce,
page: page,
},
beforeSend: function() {
$('#loading-indicator').show(); // Optional loading indicator
},
success: function(response) {
if (response.trim() !== 'no_more_posts') {
$('#posts-container').append(response);
page++;
isLoading = false;
} else {
$('#loading-indicator').text('No more posts').fadeOut();
}
},
error: function() {
console.error('Error loading posts');
isLoading = false;
},
complete: function() {
$('#loading-indicator').hide(); // Hide loading indicator
}
});
}
}
});
});—
#### 4. **Update the Theme Template**
Add the HTML structure for the posts and a loading indicator.
##### Example Template Code (`index.php`)
<div id="posts-container">
<?php
// Display initial posts
$query = new WP_Query([
'post_type' => 'post',
'posts_per_page' => 5,
]);
if ($query->have_posts()) :
while ($query->have_posts()) : $query->the_post();
?>
<div class="post">
<h2><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?></p>
</div>
<?php
endwhile;
wp_reset_postdata();
endif;
?>
</div>
<div id="loading-indicator" style="display: none; text-align: center;">Loading...</div>—
### Key Features
1. **Dynamic Post Loading:** Posts load seamlessly as the user scrolls.
2. **Loading Indicator:** A visual cue informs users that posts are being fetched.
3. **Nonce Security:** AJAX requests are secure with a nonce.
—
### Notes
– **Customize the Query:** Adjust `posts_per_page` and other parameters in the AJAX query to match your requirements.
– **Optimize Performance:** For large datasets, consider caching or lazy-loading images to reduce server load.
– **Test Responsiveness:** Ensure the implementation works on all devices and browsers.
This will automatically fetch and append posts to the container as users scroll!