Supports Load More

A lot of themes has Load More button instead of usual pagination. This button loads content with AJAX directly into a page you're viewing without reloading the page. There are few plugins, which do a good job with loading content through ajax (like Ajax Load More plugin). However existing plugins has several limitations in a free version and contains too much code inside to cover numerous of options you may want to have.

We created our own minimalistic AJAX load more component, which doesn't require much coding to use it.

Usage

Step 1: Enable Load more support

Inside your functions.php or Theme::support_plugins() method you need to create an instance of Load More:

Theme.php

<?php
...

public function support_plugins() {
	\JustCoded\WP\Framework\Supports\Just_Load_More::instance();
}

Load more class adds small javascript code, which can handle "Load more" button click and AJAX request.

Step 2: Replace pagination with "Load more" button

Framework has several functions to print pagination on custom archive pages. We will use "Next" button as "Load more", because it points to the correct page we have data (http://domain.com/some-archive/page/*).

Framework helper function to print "Next" button has additional parameter comparing to a standard WordPress pagination function:

function cpt_next_posts_link( WP_Query $wp_query, $label, $load_more_attr = '' )

$load_more_attr is a string with HTML5 data-* attributes to enable custom javascript, enqueued with a component. Custom data attributes are:

• data-selector="..." - jQuery/CSS* selector of a DOM element to take data from a new page
• data-container="..." (optional) - jQuery/CSS* selector of a DOM element to append new HTML. If not passed - data-selector will be used.

_* Note: Only single class or ID is supported. Like ".posts-list", "#content".

Example:

<?php
/* Template Name: Employee Archive */
/* @var \JustCoded\WP\Framework\Web\View $this */

$model = new Boilerplate\Theme\Models\Employee();

$this->extends( !defined('JTF_LOAD_MORE_AJAX') ? 'layouts/main' : 'layouts/ajax' ); ?>

<?php while ( have_posts() ) : the_post(); ?>
	<?php the_title('<h1>', '</h1>') ?>
<?php endwhile; // End of the loop. ?>

<div class="employees-list">
<?php while ( $model->query->have_posts() ) : $model->query->the_post(); ?>
	<?php $this->include( 'employee/_content' ); ?>
<?php endwhile; ?>
</div>

<?php if ( $model->query->max_num_pages > 1 ) : // check if the max number of pages is greater than 1.  ?>
    <div class="alignright">
        <?php echo cpt_next_posts_link( $model->query, 'Load More', 'data-selector=".employees-list"' ); // display older posts link. ?>
    </div>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

If you don't want to load the whole layout with header/footer/sidebar you can update $this->extends() statements to check on JTF_LOAD_MORE_AJAX constant and replace the layout to some empty or minimalistic one.

$this->extends( !defined('JTF_LOAD_MORE_AJAX') ? 'layouts/main' : 'layouts/ajax' );

Step 3: Test your button

Run a test of your new "Load more" button.

How it works

• Load more component registers javascript, which catch all clicks for a.jtf-load-more elements.
• As usual Next button link href contains URL for the next page with correct data, furthermore - we send data selector and container attributes to the server.
• During the page load component check that the request was send with load more script. If it is true - component enable output buffer an register contstant meaning we're in Load-more-mode.
• After the whole page is generated on clearing output buffer we find the correct selector with DomXPath and return to the browser the part it's looking for.
• Once browser/javascript get response from the server with final HTML it's appended inside the container.