Integrating jSquares and Jquery with Wordpress loop

Your main issue is that you’re loop logic is incorrect

You’re doing:

Foreach post
    iterate over each box type
        and print out the current post as that box

So if you define 5 boxes, then for post 1 you’ll have 5 copies of that post, then another 5 for post 2, then another 5 for post 3. You’re showing 15 posts, and you’ve defined 15 boxes, so your code is going to output 15×15=225 jsquares.

Instead you want:

foreach post N
    print out the current post as box N

so:

$q = new WP_Query(array(
    /* .. options .. */
));
if($q->have_posts()){
    $counter = 0;
    while($q->have_posts()){
        $q->the_post();
        $box = $boxes[$counter];
        // print out your jsquare stuff here

        // increment the counter
        $counter++;
    }
    // reset the main post data
    wp_reset_postdata();
} else {
    echo '<p>hmmm no posts found</p>';
}

Here we setup a counter, and use that to grab the box from the boxes array. At the end of the loop we increase it by 1 so that the next post uses the next box along.

You may also find libraries like Isotope and jQuery Masonry interesting

Related Posts: