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

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

Stefen Phelps posted on in Development, Website, and WordPress.

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>

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') );
});

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

Share via Facebook Share via Twitter Share via Email Share via LinkedIn Share via Google+

Comments

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.

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

Stefen Phelps says

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

Add a comment