Many popular platforms allow users to load more posts when they reach the bottom of the page. In this article, we will show you how to easily add a load more posts button to your own website in WordPress.
Why Should I Add A Load More Posts Button?
Many blogs use a simple ‘Older posts’ navigation link at the end of their home, blog, or archive pages. Some websites may even usenumeric page navigation which adds more context.
However, there are some type of websites that can benefit immensely from an infinite scroll or a load more posts button. Some examples includephotography websites, lists, and viral content websites.
Now let's take a look at how easy it is to actually add a load more posts button in WordPress.
Adding The More Posts Button To Your Website
The first thing we would recommend doing is downloading and adding the Ajaxplugin to your website.
Once activated, the plugin will add a new menu item labelled ‘Ajax Load More’ to your WordPress admin menu. Click on it and you'll be taken to the plugins settings page.
Here, you can change settings such as the colour of your button, or change over from a load more posts button to something else, like an infinite scroll for example.
Next, you will need to visit theAjax Load More > Repeater Template page to add your template for displaying posts. The plugin comes with a basic template containing theWordPress loopto display posts. However, if it does not match your theme it may look out of place on your website.
To fix this, you need to copy the code your theme uses to display posts on the index, archive, and blog pages. Normally, this code is located in the template-parts folder of your theme. In that folder, you will see templates to display different content. For example content-page.php, content-search.php, and more.
You will be looking for the generic content.php template.
Once you find that code, you'll need to paste it inside the Repeater Templates field in plugin settings. Next, you need to go to theAjax Load More > Shortcode Builderpage to generate ashortcode.
First, you will need to select the container type. If you are unsure, just look at the template you copied earlier. Most modern themes use the;<div> element.
After that scroll down to the button labels section. Here you can change the text that appears on the button. By default, the plugin uses ‘Older Posts’, but you can change that to a ‘Load more posts’ or anything else you want.
Your shortcode is now ready to be used. In the right column, you will see the shortcode output. Go ahead and copy the shortcode and paste it into a text editor, as you'll need it in the next step.
Adding The Load More Posts Button To Your Theme
This part of the tutorial requires you to add code into your WordPresstheme files. Don’t forget tobackup your WordPresstheme and websitebefore making any changes.You will need to find the template files where you want to add the load more posts button in your theme. Depending on how your theme is organized, usually, these files are index.php, archives.php, categories.php, etc.
You will need to add the shortcode you copied earlier into your theme right after theendwhile;tag. Since we are adding the shortcode in a theme file, we will need to add it inside the do_shortcode function, like this:
Facebook0TwitterReddit0StumbleUpon0 Do you need to increase the memory limit in WordPress? Getting an error about memory Exhausted? The memory limit is one of the most common WordPress errors as the default limit of memory in WordPress is only set to 64mb! But there’s good news! The Memory Exhausted error is...
Facebook0TwitterReddit0StumbleUpon0 A vulnerability has been discovered in the “All In One WordPress Migration” WordPress plugin. All versions earlier than, and including 6.97 contain a vulnerability which allows Cross-Site Scripting (XSS).With over 2 million active installations, this vulnerability has the potential to be high impact, however, this is lessened by the...
Facebook0TwitterReddit0StumbleUpon0HostPresto will be launching a European point of presence in the coming weeks, specifically in Amsterdam. For customers needing their data located within the EU still please contact support to request migration to this location with ticket subject ‘EU Migration’. We will ensure this is actioned well before the Brexit...