Skip to content

Add an AJAX Powered Load More Posts button to your WordPress Blog without a Plugin

There are a million plugins out there that will do this for you – most of which are just using the Infinite Scroll JavaScript plugin under the hood. They are great…

There are a million plugins out there that will do this for you – most of which are just using the Infinite Scroll JavaScript plugin under the hood. They are great because it keeps people reading without forcing them to load a new page. However, the problem with infinite scrolling is the fact that you can’t ever access the footer of the website. You probably don’t want to load an entire plugin just to add a single load more button to our blog in the first place. Instead, you can add the functionality to your theme yourself with only a few lines of JavaScript. Here’s how we did it on our Timber powered WordPress theme:

ajax powered load more posts button

The Markup

The following goes in your theme’s index.twig file:

<div id="articles">
    {% for post in posts %}
        {% include "tease.twig" %}
    {% endfor %}
    <a id="load-older-posts" href="{{ pagination.next.link }}">
        Load older posts ↓
    </a>
</div>Code language: Twig (twig)

NOTE: if you aren’t using a Timber powered WordPress theme then you’ll need to use the PHP equivalent version of the markup above in your index.php file. In general, you’ll just need to wrap your post loop and pagination with <div id="#articles"/>. Then, replace your pagination with the next_posts_link() function.

The JavaScript

$('#articles').on('click', '#load-older-posts', function(e) {
  // prevent new page load
  e.preventDefault();
  // store next page number
  var next_page = $(this).attr('href');
  // remove older posts button from DOM
  $(this).remove();
  // ajax older posts below existing posts
  $('#articles').append(
    $('<div />').load(next_page + ' #articles')
  );
});Code language: JavaScript (javascript)

The beauty of this solution is if the JavaScript fails to run for any reason, the load older posts link will still work and take you to the second page. Semantic markup for the win!

For a live demo, just visit our main blog page, scroll to the bottom, and click the load more posts button.

Comments

patrickcee says

So glad I found this. Way simpler and more elegant than messing with the native WordPress AJAX scripts. Thank you!

designa says

I have been hunting for something to add a load more button to my blog page and was hoping this was the answer.

The twig file brings out posts and load more button however my load more seems to loop through the same 10 posts and not load the next 10 when the button is clicked.

Any ideas?

Thanks

Sander says

I have had this same problem. I cant tell you the exact reason why but i know this has something to do with the default pagination working only on the “front-page.php” (So the page you selected as static home page OR the page selected for your blog roll in settings), or a archive.php type of page. Changing my page structure resolved this problem for me.

Stefen Phelps says

Double check that your load more link is actually linking to the next page.

Adesignl says

You might want to use .after() instead. Or you will eventually have 20 nested divs. Other than that ,decent solution.

Stefen Phelps says

Thanks for the suggestion Chad! I admit, the extra divs are a bit of a hack. But, it solves the problem of overwriting the 2nd page’s posts with the 3rd, etc. while keeping them in the correct order. I’d love to see a more elegant solution that keeps things just a simple.

Leave a Comment