CODEWITHSUNDEEP
phpjquerywordpress
mdcrtv
mdcrtv

Reputation: 143

Trying to create an Ajax style "Load More" button in wordpress

Using wordpress and isotope, I've created an archive page that displays individual posts as isotope style tiles.

It looks a bit like this: https://i.sstatic.net/m7lWf.png

The code that generates it consists of isotope's grid system:

$(document).ready(function () {
    var $container = $('.showcase');
        $container.isotope({
        itemSelector      : '.item',
        masonry           : {gutterWidth: 0, columnWidth: 1}
    });  
});

And wordpress/php calls to generate the content:

<div class="showcase">
    <? $project = new WP_Query( array( 'post_type' => 'project', 'posts_per_page' => 10, 'order' => 'DEC' ) ); while ( $project->have_posts() ) : $project->the_post();?>
        <div class="item">
            ~the bits and pieces that make up each post tile~
        </div>
    <? endwhile; wp_reset_postdata(); ?>
</div>

I've shortened/debranded that a bit, but I can offer more info if need be.

posts_per_page is currently set to 10, which is fine... My goal is to have a load more button that can create additional tiles.

Here's a quick and dirty demo animation: https://i.sstatic.net/hu0Gz.gif

I would like to find a way to do this without requiring a page refresh. Bonus points if it can animate with isotope's built in css transforms.

I believe isotope and it's infinite scroll plugin can handle something like this, but I'm not sure how to tie it into the php loop in Wordpress.

If anyone can offer advice, I'd very much appreciate it. Thanks :)

Upvotes: 0

Views: 1534

Answers (1)

wIRELESS
wIRELESS

Reputation: 196

I'm not sure about the Wordpress plugins, but the general approach is to have a PHP page that would get a list of items for you. You need to pass offset and limit there. For example, when you first loading the page you just get

SELECT * FROM items LIMIT 10

Then, you show a button "Show more" which would pass to php action via ajax new offset/limit. As soon as you know that you already shown 10 items you just pass the parameters

http://example.com/items/getlist?offset=10&limit=10

You can do this call via XHR (http://api.jquery.com/jQuery.ajax/), in which offset is count of already shown items. Then your php script fetches result with sql

SELECT * FROM items LIMIT 10, OFFSET 10

Then you just use javascript to append recieved by AJAX call data to your div container with items.

Upvotes: 2

Related Questions