How to Create a Load More Posts Button in WordPress
WordPress site owners use various techniques to keep their audience engaged and on their site for as long as possible. This is helped by having quality content, as well as several useful features such as additional navigation, a search feature, a sidebar with recent posts, tags, and others. While most of these features are located in the website header or sidebar, there is one that interacts with your audience near the end of an existing page or archive. This is the load more button.
You might think the load more button in WordPress is reserved for blogs only, but a feature like this can also increase audience engagement on websites with diverse content. The load more button works similarly to the infinite scroll pagination feature. Simply put, it uses asynchronous HTTP (Ajax) requests to quickly fetch new batches of content without reloading the existing page and moving you to its beginning, both of which would increase your bounce rate otherwise. As a result, your visitors are more likely to keep browsing through your content, which will increase your chances for conversion.
While the benefits of using a load more button are clear, unfortunately, this feature isn’t a built-in part of WordPress. However, there is a way to add it on your own, and that is what we’ll show you in this article. To make it easier to navigate, we’ve split this topic into smaller, more manageable, concepts:
Blog & Magazine Themes
View Collection
Before we start
To create a load more posts button, most WordPress users opt to use themes with post-related shortcodes that use the load more navigation type. All themes from QodeInteractive have this feature, and it’s commonly present in many premium themes. But, there are other ways of implementing it besides using a suitable WordPress theme. One option is to find a suitable WordPress plugin to help you, and another is to write custom code. In this article, we’ll show you how to add a load more button using a plugin called Ajax Load More.
The Ajax Load More is a freemium plugin that lets you display lists of posts and other custom post types with a load more or infinite scroll pagination type. It uses Ajax-powered queries to do this. The plugin provides a single shortcode called [ajax_load_more] and an intuitive panel for adjusting the settings of that shortcode.
Furthermore, it offers a default repeater template and a corresponding CSS code that you can use for stylization. However, the plugin also leaves a lot of space for adding custom modifications. These include a more advanced set of query options, using your custom repeater template, and even adjusting the plugin’s code using filter hooks.
This plugin is also well-documented, so using it and making any custom modifications is relatively easy. Overall, the Ajax Load More plugin is suitable for a wide range of WordPress users, from beginners to the most advanced. If you opt for the premium version of the plugin, you’ll be able to create custom and theme repeaters, additional post types, layout templates, or work with caching, SEO page indexing, and enjoy compatibility with the Elementor Posts widget and WooCommerce listing widgets.
However, if you just want to try out this feature or if you aren’t sure that this plugin is for you, we’ll show you the steps for creating a load more button using the free version of the Ajax Load More plugin. We’ll also take you through using this plugin with a custom-made repeater template and with styling CSS code. Let’s begin!
After installing the plugin, there are three steps you need to take to properly use it: create a repeater template, create the shortcode call code, and insert the shortcode call in the appropriate place on your page. By completing all three steps, you will display a list of posts (or other custom post types) with the appropriate pagination option. Whether you choose to use a load more button or infinite scroll depends only on your preferences. Since this article is dedicated to the load more button that’s what we’ll be using.
If you’d like to create a different list of posts, you will need to repeat this three-step process. By choosing a different set of shortcode options for each shortcode use, you can display different content across your website.
We will go through each of the three steps carefully. But, we must note that the plugin offers some global settings for targeting all post lists created with it. Even though these global settings aren’t directly tied to the three-step process, they can influence its outcome, as they are related to the lists’ coding structure. Therefore, we suggest intermediate and advanced WordPress users try them, while beginners should proceed cautiously as these aren’t required.
To locate these options, navigate to Ajax Load More > Settings and examine the Global Settings tab. For example, we opted to disable the default CSS that the plugin provides for stylization. Instead, we added a custom CSS class called custom-load-more to the load more button, so we can use it later for stylization. Additionally, we decided to use the <div> tag as the HTML element which will hold the code of all post items.
But, as we mentioned previously, you don’t need to use either of these options if you don’t want to, they aren’t required. What we do suggest is for you to check out the list of helpful resources on the right, particularly the Implementation Guide and the Documentation for more info on the plugin.
The Ajax Load More plugin code has a template that contains a WordPress Loop for displaying posts. However, which parts of a given post are shown is determined by the repeater templates. Creating a repeater template is the first step in the process, and to do that, you should navigate to Ajax Load More > Repeater Templates.
As you can see by now, the plugin provides you with a default repeater template that you can use. Its code is shown below.
<li class="alm-item<?php if ( ! has_post_thumbnail() ) { ?> no-img<?php } ?>">
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail( 'alm-thumbnail' );
} ?>
<h3><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
<p class="entry-meta"><?php the_time( "F d, Y" ); ?></p>
<?php the_excerpt(); ?>
</li>
The repeater template represents the HTML and PHP code behind every item inside a list of posts that the plugin shortcode will create. With the default plugin code, each post is displayed with a <li> tag. It contains the post’s featured image (if one exists), the post’s title linked to the post’s page, its publishing date, and its excerpt.
Additional repeater templates are enabled using the Custom Repeaters premium add-on, as you can see on the screenshot above. Since we opted to show you the steps using the free version of the plugin, the only repeater template that we have available is the Default Template. However, that doesn’t mean we have to use the default template code that was provided by the plugin. Instead, we can replace it with a custom code that we created. That code is shown below.
<article <?php post_class( 'qodef-blog-item' ); ?>>
<div class="qodef-blog-item-inner">
<?php if ( has_post_thumbnail() ) { ?>
<div class="qodef-media-image">
<a itemprop="url" href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( 'full' ); ?>
</a>
</div>
<?php } ?>
<div class="qodef-content">
<div class="qodef-text">
<h3 itemprop="name" class="qodef-title entry-title">
<a itemprop="url" class="qodef-title-link" href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h3>
<div class="qodef-info">
<div class="qodef-info-item qodef-info-author">
<span class="qodef-info-author-label"><?php esc_html_e( 'By', 'lekker' ); ?></span>
<a itemprop="author" class="qodef-info-author-link"
href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>"><?php the_author_meta( 'display_name' ); ?></a>
</div>
<div itemprop="dateCreated" class="qodef-info-item qodef-info-date entry-date">
<?php the_time( get_option( 'date_format' ) ); ?>
</div>
<div class="qodef-info-item qodef-info-category">
<?php the_category( ', ' ); ?>
</div>
</div>
<?php if ( has_excerpt() ) { ?>
<div itemprop="description" class="qodef-excerpt">
<?php the_excerpt(); ?>
</div>
<?php } ?>
</div>
</div>
</div>
</article>
Then, we replaced the default plugin code with our custom code and clicked on the Save Template button. You should do the same if you don’t want to use the default plugin code.
If you opt not to use the default repeater template code, you will have to replace the plugin’s default repeater code with the equivalent code you came up with, or use ours instead.
Before we move on with the guide, let’s take a quick look at the repeater template code we created for the article. The repeater template represents the HTML code of one item, i.e. post, that is part of the list of posts that will be created using the plugin.
In our code, that item is represented using the <article> tag. Each article contains the following parts: the post’s featured image (if one exists), post title, author name, the date of the post’s creation, a list of categories (separated by commas) that the post is associated with, and its excerpt (if one exists). Both the featured image, as well as the post title link to that post’s page. Additionally, both the author’s name and the category names link to their respective archive pages. Finally, we added CSS classes with the prefix qodef- within the HTML code of the article element and its parts. Those CSS classes will help in creating the CSS that will be needed for styling the shortcode output at the end.
Now that we understand the purpose of the repeater template and the repeater template code we created, we can explain how to create the appropriate shortcode call that uses that repeater template.
To do this, navigate to Ajax Load More > Shortcode Builder, which will open the Display Settings tab. This tab contains the majority of the settings for the items’ display and the load more button. The list of available options is divided into 6 subsections and is quite long. You should carefully review them all before choosing the appropriate ones for you. As you select each option, the Shortcode Output section will be updated. This section contains the shortcode call you will need to properly display the list of posts alongside a load more button.
Apart from the Display Settings tab, there is also the Query Parameters tab. While the options in the previous tab were more beginner-friendly, these are less so. The Query Parameters tab contains options that are more suited for advanced WordPress users who are familiar with all the parameters that the WP_Query class accepts. These include the number of posts per page (i.e. batch that loads), post type and format, which categories and tags to include or exclude, which taxonomy to query through, how the posts are ordered, and many more. As such, if you aren’t familiar with these parameters, we strongly suggest learning more about the properties of the WP_Query class before making any changes in this tab.
With that being said, after you select the options you want to use from either tab, you will need to copy the shortcode call displayed in the Shortcode Output section on the right. Simply locate the Shortcode Output section and click on the Copy Shortcode button.
For the settings we made, we got the following shortcode output:
[ajax_load_more loading_style="default" post_type="post" posts_per_page="3" scroll="false" button_loading_label="Loading..." button_done_label="No more posts" no_results_text="No results matched your query."]
As you can see, the shortcode call contains the shortcode name followed by a list of parameters and their values. These parameters are, in fact, the options that we chose in the previous step. They are written out in the form of option_name = “option_value”. Depending on which options you pick, your shortcode call might differ in both look and length.
After copying your shortcode output, you only need to add it to an appropriate place on your page for it to display. Since the Ajax Load More plugin provides a custom shortcode, you’ll need to insert its shortcode call into an appropriate textual element for it to work properly. In our example, we used the Gutenberg editor, where the appropriate element is called the Shortcode block.
To add this shortcode to one of your pages using Gutenberg, you need to add the Shortcode block to the page and then paste the shortcode call you copied earlier into it. Then, update the page by clicking on the Update button.
Before we move on, there are a couple of things we want to mention. First of all, the use of custom shortcodes isn’t restricted to the Gutenberg editor alone. You can use whichever page editor you prefer. For example, in Elementor you would add the shortcode call into the Text Editor element. And in WP Bakery, you would insert the shortcode call into the Text Block element.
Additionally, shortcodes can even be used inside widgets and theme template files, thanks to the do_shortcode() function. However, the latter is an older practice that we wouldn’t advise you to use if you’ve done so before.
Finally, since we already covered the topic of adding shortcodes to a page in-depth in our article on custom shortcodes, you can check it out for more information. You can read through everything or simply go over the parts on shortcode calls and their use in WordPress.
With that being said, let’s continue with our guide.
After inserting the shortcode call into an appropriate element on your page, you should check how it looks on the frontend. The display you get might not be to your liking or it might not match your brand and site design. This could be the case with both the default template from the plugin or the one that you created. This is particularly likely if you chose not to use the default CSS provided by the plugin by disabling it in the settings the way we have.
We opted to create both a custom repeater template and all the CSS it needs for stylization for this article. The CSS we used is shown below.
.alm-reveal{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
grid-gap: 20px;
}
.qodef-blog-item {
display: block;
margin-bottom: 30px;
-webkit-box-shadow: 7px 8px 19px -2px rgba(0, 0, 0, .35);
box-shadow: 7px 8px 19px -2px rgba(0, 0, 0, .35);
padding: 20px;
}
.qodef-info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 10px;
}
.qodef-info div{
padding-right: 20px;
position: relative;
}
.qodef-info div:after {
content: '/';
position: absolute;
top: 0;
right: 6px;
}
.qodef-info div:last-child:after{
content: '';
}
.alm-btn-wrap{
text-align: center;
}
.custom-load-more {
display: inline-block;
padding: 7px 12px;
margin-top: 30px;
background-color: #f55758;
border-radius: 13px;
font-size: 15px;
font-weight: 600;
color: #fff;
}
Please note, this CSS isn’t supposed to be copy-pasted without modifying it first. It was created specifically for this article and it matches the design of our test website. Moreover, the class selectors that we used in this CSS were tailored to the example of the load more button that we created for this article. Those are the custom classes with the prefix qodef- and a custom button class called custom-load-more.
Therefore, you should modify this code or create custom CSS from scratch to adjust the shortcode’s design so it matches your website and brand. When you’ve done that, you can insert the code under Appearance > Customize > Additional CSS. This is the general principle advised for most WordPress users, but more advanced users can put their CSS code inside a separate file and enqueue it using the wp_enqueue_style() function.
With that being said, after we inserted our CSS code, we got the following result.
Final Thoughts
A load more posts button can improve user experience, keep visitors longer on your site and make them more engaged in your content. Thanks to this feature, your visitors can preview more of your content without having to wait for the page to be reloaded or being sent back to the top of the page. Having a load more button on your WordPress website will have more benefits than sticking with the default WordPress pagination.
In this article, we covered how to create and add this feature in WordPress using the Ajax Load More plugin. With the default code provided by the plugin, you can add a load more button to your site in a matter of minutes. The Ajax Load More plugin also lets you customize the template code yourself and adjust it to your needs. Finally, we considered how to add the plugin’s shortcode call to your pages and how to style it so it matches your site design.
