Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Joe Li
Joe Li
8,104 Points
Posted by Joe Li
Joe Li
8,104 Points

Adding new Bootstrap Row class for every 3 products in wordpress loop?

Hey Guys,

Does anyone know how to add a new row class every 3 products? I know how to do it with a regular PHP foreach loop, but i'm not sure where to put the conditional on a wordpress loop?

Any help would be great!

Thanks!

Joe

5 Answers

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

You can use $wp_query->post_count to get the count while in the loop and run whatever logic you need based off of it.

Joe Li
Joe Li
8,104 Points
Joe Li
Joe Li
8,104 Points

Cool thanks Zac!

Stephen O'Connor
Stephen O'Connor
22,291 Points
Stephen O'Connor
Stephen O'Connor
22,291 Points

Can you post some code to give us a better idea of what you are looking for?

Joe Li
Joe Li
8,104 Points
Joe Li
Joe Li
8,104 Points

Hey Stephen,

        <div class="col-sm-12 col-md-9 text-center">
            <h3>Products</h3>
            <hr>

            <?php
              $args = array(
                'post_type' => 'products'
              );
              $query = new WP_Query($args);

              if( $query->have_posts() ) : while($query->have_posts() ) : $query->the_post(); 

            ?>


            <!-- ===== Start of Product ====== -->
              <div class="col-md-4 product-item">
                <a href="<?php the_permalink(); ?>" data-toggle="modal" data-target='#<?php the_field('target'); ?>'>
                  <?php the_post_thumbnail('large'); ?>
                </a>
                <h4><?php the_field('product_name'); ?></h4>

                <button class="btn btn-default"><a href="<?php the_permalink(); ?>">view</a></button>
              </div>

            <!-- ===== End of Product ====== -->
            <?php 
                endwhile; endif; wp_reset_postdata();
            ?>



        </div> <!-- end col-md-9 -->

This is what I have at the moment, but because some of the wording is longer than others it causes some styling issues. I therefore want to insert a row every 3 products so that it maintains its structure.

Thanks,

Joe

Joshua Richardson
Joshua Richardson
7,644 Points
Joshua Richardson
Joshua Richardson
7,644 Points

Anyone get an answer to this?