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. Thanks in advance for any help.

1 Answer

Ali M Malik
Ali M Malik
33,293 Points
Ali M Malik
Ali M Malik
33,293 Points

Digging into Wordpress has a nice right up on this that you can find here. Multiple loops is how I would do it. But feel free to explore all options.

Hope this helps

Gabriel Ward
Gabriel Ward
20,222 Points
Gabriel Ward
Gabriel Ward
20,222 Points

Hi Ali,

Thanks for the tip Ali. I've done what is talked about in that tutorial and found that that syntax is deprecated and that I need to use the new WP Loop. Do you have any suggestions about how to translate what is explained in this tutorial into the new Loop? Cheers, Gabe