3 column WordPress layout help needed

Question

I'm busy trying to put together a 3x3 magazine-style layout for the home page of my blog.

I want the divs containing each post to flow vertically so there aren't big white spaces beneath each row of 3. It seems like the easiest way to do this would be to have three columns and fill each of these (which will stop there from being a big space beneath each post-block) and then place these three columns side-by-side.

The problem is that the Wordpress loop needs to pull posts sequentially. I don't know how to change the order of the Wordpress loop and, even though I've tried some PHP trickery using counts and for loops, I can't seem to get it to work.

Any thoughts or advice on a basic Wordpress loop or CSS way to make it work would be much appreciated as it's driving me crazy!

You can see how it is currently at http://www.unleashreality.com/

Answer 1

This looks like a job for jQuery Masonry.

Check it out at http://masonry.desandro.com/

Answer 2

The direct way using loop manipulation could be simpler assuming your layout is going to fixed one as shown in the mockup image.

<?php

    $count = 0;
    $column_1 = '';
    $column_2 = '';
    $column_3 = '';
    $ad_block = '<div id="ad-block">Ad code here</div>';
    while ( have_posts() ) : the_post(); 

        $count++;
        $content = '';
        $content .= '<div class="post-block">';
        $content .= '<h2>'.get_the_title().'</h2>';
        $content .= '<div class="excerpt-block">'.get_the_excerpt().'</div>';
        $content .= '<div class="continuebutton">...READ THIS ARTICLE</div>'; // Add appropriate code here.. 

        if($count == 1 || $count == 4 || $count == 6) {
            $column_1 .= $content;
        } else if($count == 2 || $count == 7) {
            $column_2 .= $content;
        } else if($count == 3 || $count == 5 || $count == 8) { 
            $column_3 .= $content;
        } else {
            // Shouldn't come here...
        }                     

        // Insert the ad block in column 2 after adding 1st row
        if($count == 2) {     
            $column_2 .= $ad_block;
        }                     

    endwhile;                 
    ?>                        
    <div id="col1"><?php echo $column_1;?></div>
    <div id="col2"><?php echo $column_2;?></div>
    <div id="col3"><?php echo $column_3;?></div>

Adjust the code to work with inner pages.

Answer 3

If you want to do this without Javascript, you'll need to buffer the HTML for each column in your post loop and then output it in one shot once the loop is finished.

Something like the following:

<?php

    // Hold the buffered column output
    $cols = array("", "", "");

    // Keep track of column we're appending to
    $currentCol = 0;

    // Get the posts
    $posts = get_posts();
    foreach($posts as $post){ 

        // Run the WP post filters
        setup_postdata($post);

        // Append the content to the current column
        $cols[$currentCol] .= '<div class="item">';
        $cols[$currentCol] .= get_the_title();
        $cols[$currentCol] .= get_the_content();
        $cols[$currentCol] .= '</div>';

        // Increment the current column and make sure we haven't
        // gone over our total columns
        if(++$currentCol >= count($cols)){
            $currentCol= 0;
        }
    }

?>

<div id="col1"><?php echo $cols[0]; ?></div>
<div id="col2"><?php echo $cols[1]; ?></div>
<div id="col3"><?php echo $cols[2]; ?></div>