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

Posted by James Pask
James Pask
13,600 Points

Creating a bootstrap WordPress template

Hi everyone

I'm trying to convert a page from a Bootstrap Starter Kit into a working WordPress site. I have this code:

<!-- Start Basic 1-16 -->
    <section id="basic-1-16" class="basic-1-16 content-block">
        <div class="container">
            <div class="row">

                <div class="col-md-4 col-sm-6">
                    <img class="img-responsive" src="http://placehold.it/600x400">
                    <div class="editContent">
                        <h2>Column One</h2>
                    </div>
                    <div class="editContent">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa ex, suscipit id ligula at, luctus tempus dolor. Etiam sodales posuere ligula, eu aliquet nunc commodo vitae. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                    </div>
                </div>

                <div class="col-md-4 col-sm-6">
                    <img class="img-responsive" src="http://placehold.it/600x400">
                    <div class="editContent">
                        <h2>Column Two</h2>
                    </div>
                    <div class="editContent">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa ex, suscipit id ligula at, luctus tempus dolor. Etiam sodales posuere ligula, eu aliquet nunc commodo vitae. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                    </div>
                </div>

                <div class="col-md-4 hidden-sm">
                    <img class="img-responsive" src="http://placehold.it/600x400">
                    <div class="editContent">
                        <h2>Column Three</h2>
                    </div>
                    <div class="editContent">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa ex, suscipit id ligula at, luctus tempus dolor. Etiam sodales posuere ligula, eu aliquet nunc commodo vitae. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                    </div>
                </div>

            </div><!-- /.row -->
        </div><!-- /.container -->
    </section>
<!--// END Basic 1-16 -->

I'm trying to get it so that Column 1 contains my first WordPress post, Column 2 shows the second and so on.

Here's what I have so far:

    <!-- Start Basic 1-16 -->
    <section id="basic-1-16" class="basic-1-16 content-block">
        <div class="container">
            <div class="row">

                <div class="col-md-4 col-sm-6">

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

                    <div class="editContent">
                        <h2><?php the_title(); ?></h2>
                    </div>
                    <div class="editContent">
                        <p><?php the_excerpt(); ?></p>
                    </div>

                <?php endwhile; ?>

                </div>

            </div><!-- /.row -->
        </div><!-- /.container -->
    </section>

<?php else : ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

At the moment I'm getting each post appearing underneath. I'm probably doing something really stupid but I can't see why its not working as it should be. Do I just need to add a float to one of the classes already being applied or do I need to do something with WP_Query instead?

Have I missed something completely?

Hope someone can help me.

Regards James

2 Answers

James Pask
James Pask
13,600 Points

Actually, thinking about it. I could probably do multiple loops on the page starting with the first post in the first column, the second loop requesting the second post and a third loop requesting the third post.

I'll have a further play and see how I can get around it. I think this should negate the need for any conditional formatting against the css classes.

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

I think it's because you're looking to put in 3 columns of data that spans 6 across the width of the page so the theme is putting them out 1 below the other. It might have gone over the total available width in the grid? Maybe try a condition statement to the output so each every third post has the class of col-md-4 hidden-sm.

Hope this helps.

James Pask
James Pask
13,600 Points

OK I think that makes sense. What would the conditional statement look like and where would it go please?