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

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.