How to Add Load More Posts Button in WordPress

As a blogger and content creator, you want to keep people engaged and reading your posts. There are many ways to do this: a good search or tagging system, a sidebar with recent post links, a gallery of older posts once a reader reaches the bottom of the page, and so on.

Another great way is with a “load more posts” button, also known as infinite scrolling. This’ll get interested readers looking through your content as long as they want to. If you’re willing to download plugins or do some coding work, this invaluable feature is easy to add to your WordPress site. Let’s get started.

Why Infinite Scrolling?

When a user navigates to the next page, the entire site has to be reloaded. Navigation bars, background, and more — and though they probably have these elements cached, it’s an extra few seconds of waiting. With infinite scrolling, only the new post has to be loaded, which just takes a moment.

In addition, infinite scroll keeps visitors reading. They may not continue reading if they have to search to find older posts. But with a button right there, they might just stick around a little longer.

If you’re ready to add a load more button to WordPress, there are just a few things you should keep in mind.

• Always backup your WordPress site before editing template files or code. Or use a child theme to experiment before you bring your changes to the main site.
• To install a WordPress plugin, go to your WordPress admin area and click the “Add New” button below “Plugins”. From there, search for the plugin you want, install it and activate it. Easy as that!
• If that isn’t working, download the plugin from wherever you found it. Go to “Add New” again, but this time, click “Upload” to upload the file. Then install and activate the plugin.
• Some plugins come with other installation instructions if these methods don’t seem to be working!

Without a Plugin

Not a plugin person? If you’d rather do this on your own, no worries. If you’d rather code this yourself or make your own plugin, follow this guide, or this one. Both can help you set up this feature on your own — though you may be missing out on extra features and easy customization a plugin can offer.

These tutorials involve a lot of scary code, but as long as you follow the instructions, it shouldn’t be too difficult. You’ll be setting up some parameters to make sure the button doesn’t display if there are not enough posts, setting up the base code, and making it pretty with CSS.

Easy Load More

If you prefer a plugin, this is a great one to pick. Easy Load More, as its name implies, is a lazy loading plugin. It uses Ajax to load extra posts on the same page and requires very little editing to your theme files. The plugin was made specifically to leave as minuscule of a mark as possible, with a minimalistic and customizable default button, small Javascript size, and loading icons rendered with SVG so that image files won’t need to be downloaded.

Once you have the plugin downloaded, it’s really easy to get it set up. First, you’ll need to configure the plugin from its setting page on the plugin menu. Then, find the page where you’d like the infinite scroll, and add the “load_more_button()” function to your theme’s template files. It works with custom templates and on any page, from the homepage to archive pages.

Ajax Load More

If you’re looking for something more advanced, Ajax Load More comes with lots of extra functionality.

There’s a shortcode builder that allows you to create a custom query of other pages, posts, or comments. Query parameters mean the posts that load can fall into certain categories or post types, and you can filter out certain posts as well. You can also create templates so that the plugin matches up perfectly with your theme.

In addition to all these features, there are add-ons that extend functionality further. Preload posts, replace the lazy load with pages, or change the look and layout of the plugin!

While Ajax Load More can be customized and tweaked extensively by advanced users, it’s a fairly small ordeal to set it up. Just use the Shortcode Builder to create your custom shortcode, and add it to your site either directly through the content editor or by placing it in your template files. And that’s all you need to do!

Load More Products for WooCommerce

If you use E-Commerce, this specialized type of load more button uses similar Ajax coding to load infinite products. It’s compatible with multiple WooCommerce plugins. The free version gives you access to infinite scroll with a button and some basic customization features. The paid plugin has multiple lazy loading options with animations, button customization, and different loading for mobile devices.

Simple Load More

If you just need something simple and easily activated, Simple Load More will get the job done. It activates automatically on your homepage, so if that’s all you need, you can just install it, set it up, and be done with it.

If you need it on other pages, just do some easy setup and add the function “simple_more_button()” or shortcode “[load_more button_text=”ABC”]” to the template files of the page you want the button on.

Load More Anything

If you want to try a simple jQuery load more plugin, check out this one. Load More Anything works anywhere, on any page, for any content. Posts, comments, products, images — anything, and anywhere.

You’ll need a bit of technical knowledge for this. Though you don’t need to mess with theme files, you’ll need to find the “div” tag that pertains to where you want the button to show, and where it will pull content from. The easiest way is to use “Inspect Element” in the place you want the button on, and try to find the correct div, class, or aside tags. If you aren’t a web developer or don’t know how to navigate Inspect Element, you may want to skip this one.

Easily Engage Readers with Load More

That wasn’t so hard, right? Infinite scrolling is a great way to give visitors easy access to more content, without having to load multiple pages or go through navigation links. It’s simple and eliminates any possible confusion. If you don’t have a load more button on your website already, what are you waiting for?

If this guide helped you out, why not check out our Facebook and Twitter for more WordPress tips and tutorials? And if there are any WordPress tutorials you want to see from us, let us know in the comments below.

Published by [email protected]