40,000 installs!

Ajax Load More is now active on over 40,000+ websites! To celebrate, we're having a 25% off sale on all add-ons and bundles!

Use the following code at checkout:
celebrate40k Copy Valid until June 21, 2018

Don't show this again

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

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

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

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

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

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

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

  6. 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. 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,

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

  8. 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. 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 *