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

rockmodestly
rockmodestly
3,471 Points
Posted by rockmodestly
rockmodestly
3,471 Points

Query inserts extra, blank row

Hello,

I confirmed by using the project files, and it seems like the $portfolio_count query creates a blank row beneath the 8 portfolio pieces.

Tested this by simply adding a class to the portfolio row (to distinguish it from other Bootstrap rows) and if you view source you can see that three rows appear when there are only 8 portfolio pieces. The third one has nothing in it.

Any idea why this is happening? Doesn't appear to cause any harm but it bugs me to have extraneous code in there.

Thanks!

Craig Watson
Craig Watson
27,930 Points

I am in agreement here, I see that this works in this case but should you wish to add some more content either dynamically or hard coded later this may throw up some strange styling issues :/

I have tried a lot of code and found useful link also tried a for loop but just could not get this right...

Maybe Zac Gordon or Hampton Paulk can try to help us out here :)

Thanks Criag

1 Answer

Neil Brazil
PLUS
Neil Brazil
Courses Plus Student 8,408 Points
Neil Brazil
Neil Brazil
Courses Plus Student 8,408 Points

Hey guys,

This is because the last time through the loop (post 8) it is going to output the conditional statement, closing the previous row and starting a new one.

Since there are no more posts after this it then exits the loop, and closes the row with the closing div outside the loop.

A way around this is to instead move the conditional check to the top of the loop, so it will only close a row if there are subsequent post to process in the loop.

You will also need to add a second condition to the if statement, to check it's not the first time through the loop - or you will end up with a blank row at the start!

Here's some example code for this that works for me. Hopefully this makes sense

<div class="row">

    // Define arguments for the query
    /////////////////////////////////////
    <?php
        $args = array(
            'post_type' => 'portfolio',
        );
        $the_query = new WP_Query( $args );
    ?>

    // The query loop
    /////////////////////////////////////
    <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

        // Check the post count
        /////////////////////////////////////
        <?php $portfolio_count = $the_query->current_post; ?>

        // If the post count is divisible by 4 and it is not the first 
        // time through the loop close the row, and start a new one
        /////////////////////////////////////
        <?php if (($portfolio_count % 4 == 0) and ($portfolio_count != 0)): ?>

            </div><div class="row new">

        <?php endif; ?>


        // Output post
        /////////////////////////////////////
        <div class="col-xs-3 portfolio-piece">

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

            ?>

            <p><a href="<?php the_permalink(); ?>"><img src="<?php echo $thumbnail_url[0]; ?>" alt="<?php the_title(); ?>"></a></p>
            <a href="<?php the_permalink(); ?>"><h4><?php the_title(); ?></h4></a>

        </div> // End .portfolio-piece


    <?php endwhile; endif; ?>
</div>// End .row