Интеграция isotope.js с циклом WordPress

Я пытался заставить isotope.js работать на сайте WordPress. Я следовал этому уроку https://www.aliciaramirez.com/2014/03/integrating-isotope-with-wordpress/ и смогли заставить все это функционировать. Для моего дизайна я пытаюсь добавить <div class="grid-sizer"></div> каждые четыре сообщения, которые называются. Я имел в виду этот вопрос: Оберните каждые 4 сообщения в пользовательский цикл WordPress с div но не могу понять, как правильно рассчитать счет и i заявления. Может кто-нибудь помочь мне понять это? Вот мой цикл прямо сейчас:

<?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; ?>