Ez Load More

Easily load more posts with AJAX in WordPress

by Paul Huisman · github.com/paulhuisman/ez-load-more · website

★ 0stars

2forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/paulhuisman/ez-load-more/archive/refs/heads/master.zip

Readme github.com/paulhuisman/ez-load-more ↗

Easily add an AJAX load more button to a WordPress query. Clicking this button will automatically fetch the next page.

Usage

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

Arguments

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)

Examples

Make sure to include the ez_load_more_button function outside of your loop.

Timber/Twig

{% 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 %}

WordPress PHP templates:

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