Friday, June 8, 2018

Wordpress: How to add AJAX "load more" effect to postblog feed

STEP 1: Download/activate plugin

https://wordpress.org/plugins/ajax-load-more/

STEP 2: Configure shortcode as needed


STEP 3: Execute custom shortcode in template

<?php echo do_shortcode('[ajax_load_more post_type="post" posts_per_page="3" category__not_in="50" offset="3" container_type="div" taxonomy="blog" taxonomy_terms="" taxonomy_operator="NOT IN" post__not_in="50" scroll_distance="50" transition="fade" transition_container="false" images_loaded="true"]'); ?>

STEP 4: Edit plugin's template to fit design

Template is located in: wp-content/plugins/ajax-load-more/core/repeater/default.php

Common issues:

jQuery functions not working with AJAX content. For this, you will need to use the .live() function
e.g. replace
$('div.someClass').click(function(e){
    //do stuff
});
with
$('div.someClass').live('click', function(e){
    //do stuff
});
Source: "Reload javascript file after an AJAX request": http://stackoverflow.com/questions/8594408/reload-javascript-file-after-an-ajax-request

No comments:

Post a Comment