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

Gabriel Ward
Gabriel Ward
20,222 Points
Posted by Gabriel Ward
Gabriel Ward
20,222 Points

Creating columns in a Wordpress Theme

I want to create a simple two column layout like the following on this page:

http://letterbox-mag.com/story.html

Here is the code in my index.php file:

<?php get_header(); ?>


    <div class="grid-container">
        <div class="grid-5">
            <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                <h2><?php the_title(); ?></h2>

            <p><?php the_content(); ?></p>


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

        </div>
        <div class="grid-5">
            <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                <h2><?php the_title(); ?></h2>

            <p><?php the_content(); ?></p>


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

        </div>
    </div>  




<?php get_footer(); ?>

Each div class='grid-5' represents a column, so there are two columns. However at the moment each column shows all four of my posts. I want the posts to be displayed over both of the columns. So that column one displays the first two posts, and the second displays the last two posts. In short, how do I split the php code over the two columns?

Thanks in advance for any help.

1 Answer

Jacobus Hindson
Jacobus Hindson
14,429 Points
Jacobus Hindson
Jacobus Hindson
14,429 Points

You can use the current_post parameter in your code to separate posts into Odd/Even with a code block similar to this.

<?php while ($query->have_posts()): $query->the_post() ?>
    <?php if ($query->current_post % 2 == 0): ?>
Gabriel Ward
Gabriel Ward
20,222 Points
Gabriel Ward
Gabriel Ward
20,222 Points

Wow thanks Jacobus, how would I use this within a multiple loop ?

This is what I've got but it's not working

<?php get_header(); ?>


    <div class="grid-container">
        <div class="grid-5">
            // FIRST LOOP: display posts 1 thru 5
            <?php while ($query->have_posts()): $query->the_post() ?>
            <?php if ($query->current_post % 1 == 0): ?>
            <?php endwhile; ?>
        </div>
        <div class="grid-5">
            <?php while ($query->have_posts()): $query->the_post() ?>
            <?php if ($query->current_post % 2 == 0): ?>
            <?php endwhile; ?>
        </div>
    </div>


<?php get_footer(); ?>