Loading via Ajax

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 been completed.

Enqueue Ajax Load More JavaScript

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

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

add_action('wp_enqueue_scripts', function () {
  wp_enqueue_script("ajax-load-more"); // Already registered, just need to enqueue.
} );

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.

$('.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