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 From Bootstrap to WordPress Create Bootstrap Styled Theme Templates Creating a Portfolio Landing Page

Luke Buśk
Luke Buśk
21,598 Points
Posted by Luke Buśk
Luke Buśk
21,598 Points

The "row" trick in Wordpress Course imperfect?

I have a question about the trick that Zac used in the video.

If i am not wrong, after second iteration with 8 items, we will be left with new opened div with class "row", that won't be closed anyway?

Will it pose any problem?

example:

div class row
1,2,3,4
div
div class row
1,2,3,4
div
div class row

end of loop

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Luke,

Here's the code from that part:

<div class="row">
        <?php
          $args = array(
            'post_type' => 'portfolio'
          );
          $the_query = new WP_Query($args);
        ?>

        <?php if (have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); ?>

        <!-- post output omitted -->

        <?php $portfolio_count = $the_query->current_post + 1; ?>
        <?php if ($portfolio_count % 4 == 0): ?>
          </div><div class="row">
        <?php endif; ?>
      <?php endwhile; endif; ?>
      </div>

There's a closing div on the last line after the loop. That will close off the last row that is output inside the loop.

You're correct that when the loop ends you will have an opened row div. That last line in the code block will then close it.

So the code isn't going to produce an un-closed div.

However, your question made me realize that there is a slight problem with this code that I didn't realize when I went through the course.

If the number of posts is a multiple of 4 then it's going to result in an empty row div at the end. At around 16:50 in the video, Zac doesn't scroll down far enough for us to see this but I think it would be there.

I ran my local copy of the files and checked the html:

<div class="row">
  <div class="col-sm-3 portfolio-piece">
  <div class="col-sm-3 portfolio-piece">
  <div class="col-sm-3 portfolio-piece">
  <div class="col-sm-3 portfolio-piece">
</div>
<div class="row">
  <div class="col-sm-3 portfolio-piece">
  <div class="col-sm-3 portfolio-piece">
  <div class="col-sm-3 portfolio-piece">
  <div class="col-sm-3 portfolio-piece">
</div>
<div class="row"> </div>

There is an empty row div at the end.

I think the if condition needs an additional check to make sure that we're not on the last post. If we're on the last then we don't want to start another row div.

<?php if ($portfolio_count % 4 == 0 && $portfolio_count != $the_query->post_count): ?>

That is how I modified the if condition and it seems to be working.

Michael Sneed
Michael Sneed
2,381 Points
Michael Sneed
Michael Sneed
2,381 Points

This is awesome!! I was having trouble with this as well.. as I wanted to try adding a <br> tag or a <hr> tag in between breaks just to try it. I would always get an extra row with an extra <br> tag or <hr> tag.

Like this:

<?php $portfolio_count = $the_query->current_post +1; ?>
        <?php if ( $portfolio_count % 4 == 0 ) : {
                  echo '<hr>';
                  }
        ?>

Now things work for me either way!! Really cool! Thanks!!!

Anthony Giello
Anthony Giello
3,553 Points
Anthony Giello
Anthony Giello
3,553 Points

if you use the native column classes built into Bootstrap you don't need that piece of php code. Look below, that's how i fixed it.

<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 portfolio-piece">

        <?php

          $thumbnail_id = get_post_thumbnail_id( );
          $thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail-size', true );

        ?>

        <p><img class="img-responsive" src="<?php echo $thumbnail_url[0];?>" alt="<?php the_title();?>graphic"></p>
        <h3><?php the_title( ); ?></h3>

</div>

Will Hawks
Will Hawks
3,222 Points
Will Hawks
Will Hawks
3,222 Points

Anthony's answer is the real solution here... you don't need that php hack thing at all, you just need to understand how bootstrap's grid system works.

You don't need another row div at all. I'm not sure if Bootstrap v.3 is built this way, but with v.4, you can add .col-xs-12 or col-12 or I think even just .col to each column to indicate that on the smallest screen (which is always default) each column is on a line by itself. Then add something like .col-sm-6, so that on a slightly bigger screen it goes to 2 columns per line. .col-md-4 for 3 columns per line at a med screen, and .col-lg-3 for 4 columns at a large screen.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Will,

The purpose of wrapping every 4 items in a row div isn't to insure that you'll have 4 columns. The bootstrap column classes will take care of that. The course uses "col-sm-3" to get 4 columns on small devices and up.

One reason that you would take the extra step of wrapping every 4 in another row div is to prevent the problem that is shown in the following video, https://teamtreehouse.com/library/build-a-three-column-layout

If you watch the video starting at around 8:14, you'll see the kind of layout problem you can have with floated items that don't all have the same height. In that course, it was solved in the css using :nth-child(). The suggestion in this course of wrapping every 4 in another row div would be another way to solve that type of problem.

Setting only the bootstrap column classes and doing nothing else will not prevent that type of problem from happening.

This is true for bootstrap 3 which floats the columns and that is what this course uses.

Bootstrap 4 uses flexbox and you would not have the problem that is shown in the video above. With v4 you would not need these extra row div's and it would be enough to set the col classes to whatever you wanted.