If you caught the earlier post, you know how infinite scrolling can benefit your website as it increases your page depth, time on site and user experience – all while decreasing your bounce rate.

Today is all about implementation. I’m going to show you exactly how to set up infinite scroll for your WordPress site using the free version of Ajax Load More. It’s pretty painless, and with my help, you shouldn’t have any trouble getting everything going.

OK, let’s get started.

Installing the Plugin

You can install Ajax Load More like any other plugin. It’s free and available on the wordpress.org plugin repository.

Once you activate the plugin, there are a few steps you’ll need to complete to get up and running.

  1. Customize a Repeater Template
    This essentially controls the look and feel of the infinite scroll module.
  2. Build a Shortcode
    This tells WordPress which posts to include and how the infinite scroll should function.
  3. Add the Shortcode to your Site
    This is how you tell WordPress where you want the infinite scroll to appear.

Here’s how to complete each step…


Customize the Repeater Template

To customize the repeater template, start by going to Ajax Load More → Repeater Templates in your WordPress admin.

Once on the repeater template page you should see a nice code block containing the default template.

Ajax Load More repeater template

The default template is pretty versatile and you don’t necessarily need to change anything in the template unless you want to adjust the layout and/or content of the template.

The default template basically tells WordPress to display your:

  • Post thumbnail (if applicable)
  • Post title
  • Post date
  • Post excerpt

That’s the normal way of displaying a WordPress post. So if you’re fine with just adding infinite scroll in the way your posts normally display, you can move on to the next step.

Note: the default repeater template will only display post excerpts. If you want to display full posts instead, all you need to do is edit the repeater template by replacing the_excerpt() with the_content().

If you want to add more details, you can use PHP or HTML – Just remember to always wrap the template in a code tag like <li></li> or <div></div> to ensure it displays properly.


Building the Shortcode

When you’re done with the repeater template, the next thing you need to do is build the shortcode. This tells WordPress and Ajax Load More what content you want included in the infinite scroll. You can also customize a lot of details about how the scroll works.

Go to Ajax Load More → Shortcode Builder:

Shortcode Builder Intro

You have a lot of options in this page, so bear with me. Don’t feel like you have to set every option. There’s a lot of customization available, but it’s not necessary to fill in everything. I’ll highlight some of the bigger choices to make:

Post Types

Ppst Type Selection

You’ll definitely want to choose which post types you want to include in the feed. By default, Ajax Load More will only include you blog posts.

Scrolling

Scroll Options

You’ll want to set some options about how scrolling works. You can have posts automatically load as the user scrolls down (the default), or you can choose to disable the scrolling feature and have users manually click the load more button to load additional posts.

Images Loaded

Images Loaded Option

Another important option is Images Loaded. By default, the plugin will display the post as soon as the text loads and then fill the images in. If you want to make it so that posts only display when all images are fully loaded, you can set it to True.

There are lots of other options you can configure. But remember – you don’t necessarily need to change anything – you just have the power if you want it.


Adding the Shortcode

Once you’ve built the Ajax Load More shortcode, you need to add it to your theme. First, copy the shortcode from the builder page:

Shortcode Builder Copy the Shortcode

Then, add it where you want your infinite scroll to display.

For example, you could create a page called Blog and add the shortcode directly to the content editor:

Add shortcode to WordPress page

Your posts will appear on the Blog page and infinite scroll according to your settings.

You can add the shortcode anywhere – in your theme files, the content editor, or widget areas.

Add-ons to Extend Functionality

Ajax Load More offers some premium add-ons that can extend the functionality of the plugin. If you need multiple repeater templates or want some other customization options, you should check out the full list of add-ons.

Notable recommendation: If you want the infinite scroll functionality that I highlighted on Slate and Bloomberg (where even individual post pages infinitely scroll), then I highly recommend you look at the Previous Post add-on.

Wrapping Things Up

Basic infinite scrolling is easy to implement with Ajax Load More. Just set up your repeater template, build the shortcode, and add the shortcode where you want your infinite scroll to display.

If you want to extend the functionality and mimic the big guys, you can use the premium add-ons to create even more robust infinite scrolling system, but for basic infinite scrolling, the free plugin should be plenty powerful.

Got any questions? Leave them in the comments and I’ll try to help!

Comments

25 thoughts on “How to Add Infinite Scroll to WordPress with Ajax Load More”

  1. Avatar

    HEATHER

    July 24, 2020 @ 8:05 am
    Reply

    Hi Darren,
    Another newbie question!
    I added the code to my template single post.php in WordPress by copying and pasting the code and nothing happened except the actual code itself showed at the bottom of my pages. I’ve deleted this, so it is not visible at this moment on my site.

    1. Avatar

      Darren Cooney

      July 29, 2020 @ 8:52 am
      Reply

      Hi Heather,
      When adding a shortcode to a template you need to use do_shortcode.
      https://connekthq.com/plugins/ajax-load-more/docs/faqs/#what-is-the-do_shortcode-method-of-implementing-ajax-load-more

      Hope that helps.

  2. Avatar

    michelangelo.glofu

    September 02, 2019 @ 11:19 am
    Reply

    Hi Darren, very useful article. How can I add this to all the posts of website? I do not have time to add to every single post inside my website. Thanks

    1. Avatar

      Darren Cooney

      September 03, 2019 @ 10:33 am
      Reply

      Hi, You can add Ajax Load More directly to your template files. For example, single.php. this way it’s loaded automatically on your single posts.

      Hope that makes sense.

  3. Avatar

    Sabbir Ahmed

    April 25, 2019 @ 1:06 am
    Reply

    Hi Darren, I have created a custom page via a custom plugin. There have lots of data. My page id is like ?page=all-trade-name . Now I want get the data from this pages. But the [post_type=”all-trade-name” or page=all-trade-name] isn’t working on shortcode. How to fix it?

    1. Avatar

      Darren Cooney

      May 01, 2019 @ 10:36 am
      Reply

      Hi Sabbir,
      That is not how Ajax Load More works. The free plugin is for listing posts not rendering long pages.
      If you want to infinite scroll a long page you should look at the Next Page addon.
      https://connekthq.com/plugins/ajax-load-more/add-ons/next-page/

      Hope that helps.

  4. Avatar

    Rodrigo

    December 08, 2018 @ 6:49 am
    Reply

    Hi, Darren.

    Adding the code as a widget or including it in a page didn’t work for me.

    In which template file exactly should I put the code?

    1. Avatar

      Darren Cooney

      December 11, 2018 @ 2:20 pm
      Reply

      Hi Rodrigo,
      It really depends on where you want ALM to show up. Where are you looking to add it?
      Might help if I had a link to view as well.

  5. Avatar

    Sabina

    July 27, 2018 @ 9:44 am
    Reply

    Hi, is there possible to set different styling/html for every second post in the loop?

    1. Avatar

      Darren Cooney

      July 30, 2018 @ 10:40 am
      Reply

      Hi Sabina,
      Yes, you could use ALM Variables to determine the current item number.
      https://connekthq.com/plugins/ajax-load-more/docs/variables/

      Like so:

      Hope that helps.

  6. Avatar

    Jaime

    April 30, 2018 @ 3:00 am
    Reply

    Hello, Darren, I’m trying to customize the visual, adding the category, name of the author, change the order of presentation, etc, I thought it was in \wp-content\plugins\ajax-load-more\ajax-load-more.php or \wp-content\plugins\ajax-load-more\admin\includes\layout\default.php but it is not any of the same :(, can you guide me? thanks.

    1. Avatar

      Darren Cooney

      May 08, 2018 @ 2:41 pm
      Reply

      Hi Jamie.
      To edit this template you need to visit the Repeater Template section in your WP Admin.
      Ajax Load More > Repeater Templates.
      https://connekthq.com/plugins/ajax-load-more/docs/repeater-templates/

      Sorry for the delay on this.

  7. Avatar

    Khalid Ahmed

    April 26, 2018 @ 7:33 am
    Reply

    Hello ,,,

    i need to load next post before end the current post

    i use this code :

    echo do_shortcode(‘[ajax_load_more previous_post="true" previous_post_id="'.get_the_ID().'" previous_post_taxonomy="category" post_type="post" category__not_in="33930" posts_per_page="4" seo="true" scroll_distance="50" images_loaded="true" button_label="next"]‘);

    1. Avatar

      Darren Cooney

      April 26, 2018 @ 9:00 am
      Reply

      Hi Khalid,
      You could try setting scroll_distance to a negative value.
      scroll_distance=”-500″

      That should load posts before the post is in view.

  8. Avatar

    Stewart

    January 29, 2018 @ 4:22 am
    Reply

    Hi Darren. Liking the look of this plugin, it could be the solution for me but excuse my ignorance? I have added: echo do_shortcode(‘[ajax_load_more post_type="post" transition="masonry”]‘); into my functions.php file but it doesn’t change anything. Is this the correct syntax? as just adding the shortcode into the them file isn’t working for me.
    Cheers

    1. Avatar

      Darren Cooney

      January 29, 2018 @ 8:52 am
      Reply

      Hi Stewart,
      You actually do not want to echo that into your functions.php. You want to echo the shortcode into a theme template or place the shortcode into a content editor.

      Have a look at the Help section inside the plugin in your WP Admin.
      /wp-admin/admin.php?page=ajax-load-more-help

      Hope that helps.

  9. Avatar

    Emma Zethelius

    January 22, 2018 @ 6:45 am
    Reply

    Hi Darren, came across this article. Trying to add the plugin in my e-commerce sight for infinite scrolling of products but not really sure where the short code needs to go in these cases? Any insight?

    1. Avatar

      Darren Cooney

      January 22, 2018 @ 8:57 am
      Reply

      Hi Emma,
      Are you using WooCommerce?
      If so, I have an article on that -> https://connekthq.com/woocommerce-infinite-scrolling/

      It takes some development/WP knowledge though. Hope that helps.

  10. Avatar

    adem

    December 15, 2017 @ 8:04 am
    Reply

    I want to add this scroll to my custom page template. I want to have 5 posts by default at page load, then the scroll loads next 5 posts each time. Can this be achieved in custom page template ?

    thanks

    1. Avatar

      Darren Cooney

      December 17, 2017 @ 11:44 am
      Reply

      Hi adem,
      Yes, you could simply add the ajax_load_more shortcode to your custom page template.

  11. Avatar

    simon

    July 08, 2017 @ 12:38 pm
    Reply

    Hello Darren. thanks for the article. How do I proceed to have my url dynamically change on loading post ?

    1. Avatar

      Darren Cooney

      July 09, 2017 @ 8:14 pm
      Reply

      Hi Simon,
      URL updates require the Previous Post add-on – https://connekthq.com/plugins/ajax-load-more/add-ons/previous-post/

      Hope this helps,

  12. Avatar

    nab

    June 17, 2017 @ 2:11 pm
    Reply

    Hi, Nice article, explains quiet a bit to the non techy. One thing I’m not sure about is where to put this ajax code? page.php? functions.php?? confused. You can add this into your post to include some tips on this matter. Thanks

  13. Avatar

    Patrick

    February 22, 2017 @ 6:52 pm
    Reply

    Hi, I am using the Divi theme and I’m unclear on how to add this and keep the blog customization I’ve created through the Divi Builder. I’m not a PHP expert, so I’m not sure about what PHP file or Code I need to look for?

    1. Avatar

      Darren Cooney

      February 24, 2017 @ 1:16 pm
      Reply

      Hi Patrick,
      This would be a bit tricky with Divi if you don’t have much experience customizing templates. But you would essentially need to recreate your post layout and use the layout as your repeater template in Ajax Load More.

Leave a Reply

Your email address will not be published. Required fields are marked *