To display all posts with a “Load More” functionality in WordPress, you can follow these steps:
- Create a new WordPress page or use an existing one where you want to display the posts.
- Add the following shortcode in your theme’s functions.php file or create a custom plugin:
// Custom shortcode to display posts with Load More functionality
function display_posts_with_load_more($atts) {
$atts = shortcode_atts(array(
'posts_per_page' => 6,
), $atts);
$posts_per_page = intval($atts['posts_per_page']);
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'post',
'posts_per_page' => $posts_per_page,
'paged' => $paged,
);
$query = new WP_Query($args);
ob_start();
if ($query->have_posts()) {
echo '<div class="post-container">';
while ($query->have_posts()) {
$query->the_post();
echo '<div class="post">';
echo '<h2>' . get_the_title() . '</h2>';
echo '<div class="post-content">' . get_the_content() . '</div>';
echo '</div>';
}
echo '</div>';
// Display "Load More" button if there are more posts to load
if ($query->max_num_pages > $paged) {
echo '<button id="loadMoreBtn">Load More</button>';
}
} else {
echo 'No posts found.';
}
wp_reset_postdata();
return ob_get_clean();
}
add_shortcode('display_posts_with_load_more', 'display_posts_with_load_more');
- Save the changes to the functions.php file or your custom plugin.
- Create a new page in WordPress or edit the existing one where you want to display the posts.
- In the content area of the page, use the following shortcode to display the posts:
[display_posts_with_load_more posts_per_page="6"]
- Save or update the page.
Now, when you visit the page, it will display the first 6 posts. If there are more than 6 posts available, the “Load More” button will be shown. Clicking the button will load the next set of 6 posts, and so on until all posts are displayed. The posts will be loaded dynamically without the need to refresh the page.
With the Ajax Method
Sure! To implement the “Load More” functionality using AJAX in WordPress, you’ll need to modify the previous code to handle the AJAX request and dynamically load more posts without refreshing the page. Here’s how you can do it:
- Add the following code to your theme’s functions.php file or create a custom plugin:
// Enqueue the necessary script for the Load More functionality
function enqueue_load_more_script() {
wp_enqueue_script('load-more-script', get_template_directory_uri() . '/js/load-more.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_load_more_script');
// Custom shortcode to display posts with Load More functionality
function display_posts_with_load_more($atts) {
$atts = shortcode_atts(array(
'posts_per_page' => 6,
), $atts);
$posts_per_page = intval($atts['posts_per_page']);
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'post',
'posts_per_page' => $posts_per_page,
'paged' => $paged,
);
$query = new WP_Query($args);
ob_start();
if ($query->have_posts()) {
echo '<div class="post-container">';
while ($query->have_posts()) {
$query->the_post();
echo '<div class="post">';
echo '<h2>' . get_the_title() . '</h2>';
echo '<div class="post-content">' . get_the_content() . '</div>';
echo '</div>';
}
echo '</div>';
// Display "Load More" button if there are more posts to load
if ($query->max_num_pages > $paged) {
echo '<button id="loadMoreBtn" data-paged="' . ($paged + 1) . '">Load More</button>';
}
} else {
echo 'No posts found.';
}
wp_reset_postdata();
return ob_get_clean();
}
add_shortcode('display_posts_with_load_more', 'display_posts_with_load_more');
// AJAX handler for loading more posts
function load_more_posts_ajax_handler() {
$paged = isset($_POST['paged']) ? intval($_POST['paged']) : 1;
$args = array(
'post_type' => 'post',
'posts_per_page' => 6,
'paged' => $paged,
);
$query = new WP_Query($args);
ob_start();
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
echo '<div class="post">';
echo '<h2>' . get_the_title() . '</h2>';
echo '<div class="post-content">' . get_the_content() . '</div>';
echo '</div>';
}
} else {
echo 'No more posts found.';
}
wp_reset_postdata();
$response = ob_get_clean();
wp_send_json_success($response);
}
add_action('wp_ajax_load_more_posts', 'load_more_posts_ajax_handler');
add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts_ajax_handler');
Create a new JavaScript file named load-more.js and place it in your theme’s or child theme’s “js” folder. The file should contain the following code:
jQuery(document).ready(function($) {
var paged = 2; // Start from the second page, as the first page is already displayed
$('#loadMoreBtn').on('click', function() {
var $button = $(this);
$button.text('Loading...');
$.ajax({
url: ajaxurl,
type: 'POST',
data: {
action: 'load_more_posts',
paged: paged,
},
success: function(response) {
if (response.success) {
$('.post-container').append(response.data);
$button.text('Load More');
paged++;
} else {
$button.text('No more posts');
$button.attr('disabled', true);
}
},
error: function() {
$button.text('Error');
}
});
});
});
- Save the changes to the functions.php file and create the
load-more.jsfile in the “js” folder. - Create a new page or edit the existing one where you want to display the posts.
- In the content area of the page, use the following shortcode to display the posts:
[display_posts_with_load_more posts_per_page="6"]
- Save or update the page.
Now, when you visit the page, it will display the first 6 posts. If there are more than 6 posts available, the “Load More” button will be shown. Clicking the button will load the next set of 6 posts dynamically without the need to refresh the page. The “Load More” button will be disabled when there are no more posts to load
