Integrating isotope.js with Wordpress loop - php

Question

I've been trying to get isotope.js working on a Wordpress site. I've been following this tutorial https://www.aliciaramirez.com/2014/03/integrating-isotope-with-wordpress/ and have been able to get it all functioning. For my design, I'm trying to add <div class="grid-sizer"></div> every four posts that are called. I've been referring to this question: Wrap every 4 posts in a custom wordpress loop with a div but cannot seem to figure out the proper placement for the count and i statements. Can anyone help me figure this out? Here's my loop right now:
<?php
$terms = get_terms( array(
'taxonomy' => 'solutions',
'parent' => 0
)
); // get all categories, but you can use any taxonomy
$count = count($terms); //How many are they?
if ( $count > 0 ){ //If there are more than 0 terms
foreach ( $terms as $term ) { //for each term:
echo "<li><a href='#' data-filter='.".$term->slug."'>" . $term->name . "</a></li>\n";
//create a list item with the current term slug for sorting, and name for label
}
}
?>
</ul>
<?php
$args = array(
'post_type' => 'product',
'posts_per_page' => -1,
'orderby' => 'title',
'order' => asc,
'tax_query' => array(
array(
'taxonomy' => 'solutions',
'field' => 'term_id',
'terms' => get_queried_object()->term_id,
),
) );
$the_query = new WP_Query( $args ); //Check the WP_Query docs to see how you can limit which posts to display ?>
<?php if ( $the_query->have_posts() ) : ?>
<div id="isotope-list">
<?php
while ( $the_query->have_posts() ) : $the_query->the_post();
$termsArray = get_the_terms( $post->ID, "solutions" ); //Get the terms for this particular item
$termsString = ""; //initialize the string that will contain the terms
$i = 0;
foreach ( $termsArray as $term ) { // for each term
$termsString .= $term->slug.' '; //create a string that has all the slugs
}
if($i%4 == 0) {
echo "<div class='grid-sizer'> </div>";
}
?>
<div class="<?php echo $termsString; ?>item">
<p class="product-image"><a href="<?php the_permalink(); ?>" ><img src="<?php the_field("product_image") ?>" alt="<?php the_title(); ?>" class="solution-image" /></a></p>
<h4 class="product-name">
<?php the_title(); ?>
</h4>
</div>
<?php $i++; ?>
<!-- end item -->
<?php endwhile; ?>
</div>
<!-- end isotope-list -->
<?php endif; ?>

Answer 1

Here's the resulting code - thanks for misorude's help!
<?php
$terms = get_terms( array(
'taxonomy' => 'solutions',
'parent' => 0
)
); // get all categories, but you can use any taxonomy
$count = count($terms); //How many are they?
if ( $count > 0 ){ //If there are more than 0 terms
foreach ( $terms as $term ) { //for each term:
echo "<li><a href='#' data-filter='.".$term->slug."'>" . $term->name . "</a></li>\n";
//create a list item with the current term slug for sorting, and name for label
}
}
?>
</ul>
<?php
$i = 0;
$args = array(
'post_type' => 'product',
'posts_per_page' => -1,
'orderby' => 'title',
'order' => asc,
'tax_query' => array(
array(
'taxonomy' => 'solutions',
'field' => 'term_id',
'terms' => get_queried_object()->term_id,
),
) );
$the_query = new WP_Query( $args ); //Check the WP_Query docs to see how you can limit which posts to display ?>
<?php if ( $the_query->have_posts() ) : ?>
<div id="isotope-list">
<?php
while ( $the_query->have_posts() ) : $the_query->the_post();
$termsArray = get_the_terms( $post->ID, "solutions" ); //Get the terms for this particular item
$termsString = ""; //initialize the string that will contain the terms
foreach ( $termsArray as $term ) { // for each term
$termsString .= $term->slug.' '; //create a string that has all the slugs
}
if($i%4 == 0) {
echo "<div class='grid-sizer'> </div>";
}
?>
<div class="<?php echo $termsString; ?>item">
<p class="product-image"><a href="<?php the_permalink(); ?>" ><img src="<?php the_field("product_image") ?>" alt="<?php the_title(); ?>" class="solution-image" /></a></p>
<h4 class="product-name">
<?php the_title(); ?>
</h4>
</div>
<?php $i++; ?>
<!-- end item -->
<?php endwhile; ?>
</div>
<!-- end isotope-list -->
<?php endif; ?>