How to add a "Show more" button for posts in WordPress

The "Show More" button is a great way to improve the user experience on your site, allowing users to download more content without having to reload the page. In this guide, we will look at how to implement this button in WordPress using simple custom code.

Step 1: Preparation

Before you start, make sure you have access to edit your theme files or the ability to create a custom plugin. We will use AJAX to dynamically download content.

Step 2: Creating an AJAX processor

First of all, let's create an AJAX handler in your functions.php file or in your plugin.

<?php
// Function for processing AJAX request
function load_more_posts() {
// Check for security
check_ajax_referer('load_more_posts', 'security');

$paged = $_POST['page'] + 1; // Next page
$args = array(
'post_type' => 'post',
'posts_per_page' => 3, // Number of posts to download
'paged' => $paged,
);

$query = new WP_Query($args);

if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
?>
<div class="post">
<h2><?php the_title(); ?></h2>
<div><?php the_excerpt(); ?></div>
</div>
<?php
}
} else {

// If there are no more posts
wp_send_json_error();
}
wp_reset_postdata();
die();
}

// Connect the function to AJAX
add_action('wp_ajax_load_more', 'load_more_posts');
add_action('wp_ajax_nopriv_load_more', 'load_more_posts');

Explanations to the code:

• We create the function load_more_posts(), which will execute the request to receive posts.
• Use check_ajax_referer() to check security.
• Get the number of the next page using the variable $_POST['page'].
• Create a new object WP_Query to extract the required number of posts.
• If the posts are found, we display them, if not, we send an error.

Step 3: Creating a "Show More" button

Now let's create a button on your page. Paste the following HTML in the right place in your template (for example, index.php or archive.php).

<div id="post-container">
<?php
// Displaying posts
if (have_posts()) {
while (have_posts()) {
the_post();
?>
<div class="post">
<h2><?php the_title(); ?></h2>
<div><?php the_excerpt(); ?></div>
</div>
<?php
}
}
?>
</div>
<button id="load-more" data-page="1">Show more</button>

Explanations to the code:

• We create a container #post-container to store posts and a button #load-more, which will initiate an AJAX request.

Step 4: Adding JavaScript for AJAX request

Now you need to add JavaScript to make the "Show more" button work. Create a file load-more.js in your theme folder and add the following code:

jQuery(function($) {
$('#load-more').on('click', function(e) {
e.preventDefault();
var button = $(this);
var page = button.data('page');

$.ajax({
url: ajaxurl,
type: 'POST',
data: {
action: 'load_more',
page: page,
security: '<?php echo wp_create_nonce("load_more_posts"); ?>' // Security
},
beforeSend: function() {
button.text('Loading...'); // Change the button text
},
success: function(data) {
if (data) {
$('#post-container').append(data); // Adding posts
button.data('page', page + 1); // Updating the page number
button.text('Показать еще'); // Return the text of the button
} else {
button.remove(); // Remove the button if there are no more posts
}
},
error: function() {
button.text('Mistake! Try again.');
}
});
});
});

Explanations to the code:

• We use jQuery to process the button press.
• Send an AJAX request to the server with data, including page number and nonce for security.
• Process the answer and add new posts to the container.

Step 5: Connecting JavaScript and jQuery

Don't forget to connect your JavaScript file and jQuery. Add the following code to your functions.php file:

function enqueue_load_more_scripts() {
wp_enqueue_script('jquery'); // Connecting jQuery
wp_enqueue_script('load-more', get_template_directory_uri() . '/js/load-more.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_load_more_scripts');

Step 6: Button style (optional)

You can stylize the button by adding CSS to your style file:

#load-more {
background-color: #007cba; /* Background color */
color: #ffffff; * Text color */
padding: 10px 20px; /* Indents */
border: none; /* Remove the frame */
border-radius: 5px; /* Round the corners */
cursor: pointer; /* Indicate that the button is clickable */
transition: background-color 0.3s ease; /* Smooth transition */
}

#load-more:hover {
background-color: #005f8d; /* Color when hovering */
}

Now you have a "Show more" button, which dynamically uploads posts to your WordPress site. This implementation uses AJAX to ensure smooth interaction with the user without reloading the page. You can adjust the number of uploaded posts, button styles and other parameters at your discretion.