Loading via Ajax | Code Samples | Docs

This snippet will show you how to initiate Ajax Load More when loading dynamically via Ajax. This is a two-step process of enqueuing the JavaScript and then initiating Ajax Load More after the loading has completed.

Enqueue Ajax Load More JavaScript

You must manually enqueue the core Ajax Load More JS as by default it is only loaded when the shortcode is present on the screen.

Add the following to functions.php file in your theme directory.

// functions.php

function enqueue_ajax_load_more() {

wp_enqueue_script('ajax-load-more'); // Already registered, just needs to be enqueued

}

add_action( 'wp_enqueue_scripts', 'enqueue_ajax_load_more' );

Initiate Ajax Load More

If you are using a jQuery.load() function or something similar to load Ajax Load More onto a page you will need to initiate the instance by calling ajaxloadmore.start(selector); as seen in the following JavaScript snippet.

// Your Custom JS file

$('.button').on('click', function(){

$( "#target" ).load( "http://your_website.com/ajax-page/ #ajax-load-more", function() {

var el = document.querySelector('.ajax-load-more-wrap');

ajaxloadmore.start(el);

});

« Back to Code Samples