Add an Infinite Scroll to Posts Feed in WordPress

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.

  • Typeunzip ajax-load-more.zip

This will unzip the file and place a directory called ajax-load-more inside the plugins directory.

How to Add an Infinite Scroll to the Posts Feed in WordPress

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.

How to Add an Infinite Scroll to the Posts Feed in WordPress


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.

How to Add an Infinite Scroll to the Posts Feed in WordPress

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.

How to Add an Infinite Scroll to the Posts Feed in WordPress

  • Click the Options tab.
  • Change the Button loading style to circle fill.

How to Add an Infinite Scroll to the Posts Feed in WordPress

  • 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.

How to Add an Infinite Scroll to the Posts Feed in WordPress

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.

How to Add an Infinite Scroll to the Posts Feed in WordPress

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.

How to Add an Infinite Scroll to the Posts Feed in WordPress

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.

How to Add an Infinite Scroll to the Posts Feed in WordPress

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 ‘/’.

How to Add an Infinite Scroll to the Posts Feed in WordPress

  • 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.

How to Add an Infinite Scroll to the Posts Feed in WordPress

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!

Author

  • Jorge Montoya

    Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.

0 0 votes
Article Rating
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x