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

Erin Manahan
Erin Manahan
20,413 Points
Posted by Erin Manahan
Erin Manahan
20,413 Points

How do I get the WordPress loop to populate custom posts into more than one column?

I originally wanted to create a three column look, almost Pinterest style or masonry style, for one of the pages I'm working on for a friend's website. But after unsuccessfully trying to integrate the Masonry javascript library (http://masonry.desandro.com/) into my theme following this tutorial (http://zoerooney.com/blog/tutorials/qa-the-pinterest-style-grid-a-k-a-masonry/) I'm now just trying to get even two columns for the page. I've spent a long time looking for ways to do this, but I can't figure it out.

I'm using Foundation so I'm not sure if it's grid system is what is causing me to have problems or not. I can put up my code so far if that would help, but as I'm running wordpress locally I can't link to the site yet.

Any help with how to get more than one column for listing custom posts in wordpress would be helpful.

Thanks

3 Answers

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points 
<?php
            if ( have_posts() ) :
                // Start the Loop.
                while ( have_posts() ) : the_post();
        ?>

                    <?php 
                        // acces global query so you can get to the $current post property.
                        global $wp_query;
                        // check index of current post to see if it is divisible by 2 with
                        // a remainder of Zero. If so, start a new row. 
                        if( $wp_query->current_post%2 === 0 ):
                    ?>
                        <div class="row">
                    <?php endif ?>
                    <div class="small-2 large-2 columns">
                        <h2><?php the_title();?></h2>
                        <?php the_content(); ?>
                    </div>
                    <?php if( $wp_query->current_post%2 !== 0): ?>
                        </div><!-- closing div tags for row-->
                    <?php endif; ?>

                <?php endwhile;?>
        <?php else :?>
            <h3> Information not found</h3>
        <?php endif; ?>
Erin Manahan
Erin Manahan
20,413 Points
Erin Manahan
Erin Manahan
20,413 Points

Ya I tried that, but I end up getting 5 really skinny columns instead of just two. I have 5 example posts up so I think it just made each post a column.

I even took out my markup and just used the_title in the loop and I still ended up with the five post titles in five columns...

<?php 

    $args = array(
        'post_type' => 'pinterest'
    );
    $query = new WP_Query( $args );

?>



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

                <?php 
                    // acces global query so you can get to the $current post property.
                    global $wp_query;
                    // check index of current post to see if it is divisible by 2 with
                    // a remainder of Zero. If so, start a new row. 
                    if( $wp_query->current_post%2 === 0 ):
                ?>
                    <div class="row">

                <?php endif ?>

                        <div class="medium-2 large-2 columns">
                            <h2><?php the_title(); ?></h2>
                        </div>

                <?php if( $wp_query->current_post%2 !== 0 ): ?>

                    </div><!-- closing div tags for row-->

                <?php endif; ?>

            <?php endwhile;?>

        <?php else :?>
            <h3> Information not found</h3>
    <?php endif; ?>

It ends up like this

[IMG]http://i.imgur.com/VYxmDqh.png[/IMG]

I'm not sure where I'm going wrong.

Erin Manahan
Erin Manahan
20,413 Points
Erin Manahan
Erin Manahan
20,413 Points

Right. it's in tiny columns because I copied the wrong column markup- should be large-6 columns for 2 columns. But I'm still not getting two columns with that change, just getting one because the div with the row that shows up from the if statement isn't showing up. Not sure why that's happening.

But after more research I found a solution on the Foundation forum using the block grid instead.

<div class="row">
         <ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
         <?php // Query latest blog items
               $args = array( 
               'post_type' => 'post', // If you have a custom type you can enter the id here instead of 'post' 
                );
                $blog_query = new WP_Query( $args );

    // Start the loop
    if ( $blog_query->have_posts() ) : while ( $blog_query->have_posts() ) : $blog_query->the_post(); ?>

              <li>     
                   <h4><?php the_title(); ?></h4>
                   <?php the_content(); ?>
               </li>

     <?php endwhile;
        // Always reset the loop after you're done with the loop
        wp_reset_postdata();
     else:  // In case no posts have been found?>

         <p><?php _e( 'Sorry no posts found.' ); ?></p>

      <?php endif; ?>

      </ul>

    </div> <!-- end row -->

Found on the foundation forum(http://foundation.zurb.com/forum/posts/8217-can-i-get-some-help-with-creating-wordpress-posts-with-my-foundation-theme).

Thanks for trying to help though, much appreciated!