Add an Infinite Scroll to Posts Feed in WordPress
Blog owners and owners of news sites like to keep their readers engaged. That is, they try to keep the user focused on the content, so they do not leave the site.
Many blogs make use of an infinite scroll effect, to display posts and articles (custom post types) on their WordPress sites. This technique is used to generate clicks from the reader. It resembles the feed of all known social networks, maybe that is the reason why it is so popular.
The Ajax Load More plugin for WordPress provides this functionality. You can then enhance it to your liking, through the configuration options available.
Keep reading to learn how to use this plugin!
Step #1. – Install the Plugin
I am working on a local installation of WordPress, so I am installing the module via terminal, due to the lack of FTP credentials on a local machine.
- Open the terminal application of your system and place the cursor on the /wp-content/plugins directory.
- Type: wget https://downloads.wordpress.org/plugin/ajax-load-more.zip
This will download a zip file from the WordPress.org plugin repo.
- Type: unzip ajax-load-more.zip
This will unzip the file and place a directory called ajax-load-more inside the plugins directory.
One last step is to remove the compressed file, which is no longer needed.
- Type:
rm ajax-load-more.zip
- Open your WordPress Dashboard.
- Click Plugins.
- Locate the Ajax Load More plugin.
- Click Activate.
Step #2. – Create a Shortcode
The plugin works with a shortcode that you can embed into your posts, into a widget, or a Gutenberg block.
- Click Ajax More Load > Shortcode Builder
The configuration screen looks a little bit overwhelming, because of the many options available.
- Click the Collapse All button on the right part on top of the list.
You have 3 main configuration areas here:
- Display Settings
- Query Parameters
- Integrations
The Display Settings area controls the look of the output, that is, how are your readers going to see the “load more” effect on their screens.
- Click the Options tab.
- Change the Button loading style to circle fill.
- Scroll down and change the “Destroy after” option to 10.
That means the Ajax functionality will run (it will refresh and present a list of new articles) 10 times. The value 0 means that the Ajax effect will run forever.
Notice also that there is the possibility to add custom CSS classes to the container containing the list elements, and the shortcode that is being generated on the right column, each time you tweak some setting.
The plugin is very well documented, you can research more about every single option, by clicking the ‘?’ symbol beside each one of them.
- Click the Query Parameters tab to unfold it.
The plugin has to make an SQL query to the database to pull out the right type of post/article to be shown to the reader. These options allow you to configure that query through the graphic interface.
- Click the Posts per page tab.
- Change the value to 4.
There is even the possibility to add custom fields to the query, or to add a search term, so only the posts containing a particular search term will be included in the query.
With the Post Parameters option, you can target specific posts, to include them in the query or exclude them from it. As you can see, it is highly configurable.
Feel free to explore these options and change the values to your liking to see what happens.
The integrations area of the screen relates to the paid add-ons of the plugin. Check them to see if you need some of these features and consider buying the pro version of the plugin.
- Click the blue button on the right to copy the shortcode.
- Click Ctrl + C.
- Click ok
Step # 3. – Place the Shortcode
- Click Posts > Add new.
- Enter a proper title and description.
- Add a shortcode block with the editor by clicking the ‘+’ symbol or typing ‘/’.
- Place the shortcode.
- Click Publish two times.
- Click View post.
You will be presented now with a specific list of posts. The Ajax effect will stop after presenting post # 30.
Step # 4. – The Global Settings
You can tweak the global settings If you want to have a (preconfigured) default loader.
- Click Ajax Load more > Settings.
Change the options to your liking and save them. The next time, you will only need to place the shortcode [ajax_load_more] on your posts and the default loader will be displayed.
I hope you liked this tutorial, thanks for reading!