Easily add an AJAX load more button to a WordPress query. Clicking this button will automatically fetch the next page.
The Ez Load More plugin allows you to add a load more button to your template. Using AJAX and the default WordPress query paging the next page will be fetched and displayed.
All you have to do is include the following code in your template:
ez_load_more_button($args);
If you use Timber (and i hope you do), you can use the following in your Twig template:
{{ function('ez_load_more_button', args) }}
| name | required | description |
|---|---|---|
| template | yes | The template for the post teasers, in twig (via Timber) or regular WordPress php templates. |
| label | yes | The label used in the load more button |
| context | yes | Will be used to set nonces for this specific AJAX call |
| button_class | no | The class set on the load more button |
| custom_loader | no | You can overwrite the default loader by setting this parameter to a div classname. Make sure your html with this div is located in a ajax-loader.php template in your active theme). Make sure the div class is hidden by default (display:none), it will be displayed by javascript. (Tip: Pure CSS Loaders) |
Make sure to include the ez_load_more_button function outside of your loop.
{% block content %}
{% for post in posts %}
{% include 'partials/teaser.twig' %}
{% endfor %}
{% set args = {
'template': 'partials/teaser',
'label': 'Load more'
'context': 'archive'
} %}
{{ function('ez_load_more_button', args) }}
{% endblock %}
if (have_posts()) {
while (have_posts()) : the_post();
get_template_part('content', 'teaser');
endwhile; // end of the loop.
$args = [
// Required
'template' => 'teaser',
'label' => 'Load more',
'context' => 'archive',
// Not required
'button_class' => 'my-custom-button-class',
'custom_loader' => 'lds-ripple',
];
ez_load_more_button($args);
}