CODEWITHSUNDEEP
wordpressloopswordpress-themingjquery-masonry
Alex
Alex

Reputation: 19

Two columns layout in one wordpress loop, any ideas?

My client wants the layout like this (click here), but I've tried a lot of ideas and can't get the result.

I'm using wordpress for getting posts by date (this is one loop), also my theme is using this jQuery Masonry Library to get two columns layout (I can disable it if it's necessary).

So I have only two authors, and now I need to place each author's post into two different columns. In the first column there should be posts by Jack (for example), and in the second - posts by Kate (for example).

But also there will be posts that intersect both columns.

The loop should give posts only by date, so those posts should somehow find their place.

That's my idea: I can make a class for Kate's posts that will edit the width of this posts (for example 359px), but Jack's posts still have 360px by default. if I specify each column min and max width in masonry layout, theoretically - I can force my posts get different columns (masonry will place wide post in the first column by default). But I cann't find any kind of option that can specify each column width (columnWidth in masonry library sets the width for all columns).

Any ideas of how to specify each column width?? or maybe you have some other ideas of this layout?

Upvotes: 0

Views: 513

Answers (1)

Tim Shedor
Tim Shedor

Reputation: 165

Not entirely sure on Masonry (just started using Isotope), but I would structure with query_posts, unless you're doing this on a specific, non-archive page, then use WP_Query. The code below is assuming the page you're on is already querying posts for both Jack and Kate.

<div id="authorColumnsRow"> <!--/* clear:both */-->
    <div class="author-columns" id="JACK"> <!--/* .author-columns { float:left; width:45%; margin-right:2.5%; } */-->
    <?php query_posts('author='.$JACKSAUTHORID.'&posts_per_page=2'); while(have_posts()) : the_post(); 
     //do post stuff here, i.e. the_title(), the_permalink();
    endwhile; wp_reset_query(); ?>
    </div>
    <div class="author-columns" id="KATE">
    <?php query_posts('author='.$KATESSAUTHORID.'&posts_per_page=2'); while(have_posts()) : the_post(); 
     //do post stuff here, i.e. the_title(), the_permalink();
    endwhile; wp_reset_query(); ?>
    </div>
</div>
<div id="fullRow"> <!--/* clear:both */-->
<?php query_posts('offset=4'); //To avoid duplicates
while(have_posts()) : the_post();
     //Post stuff for both of them
endwhile; ?>
</div>

Upvotes: 0

Related Questions