Spruce interactive

Noise

Good Old 2 Column Loop in WordPress

Posted: August 13th, 2012

Author: KJ Parish

Tags:

, , , ,

 Details

Today’s tip is for WordPress peeps. While it’s awesome that we can use CSS to display post loop content in multiple columns (see this tute), sometimes it’s necessary to have a bit more control over the display. This is where dividing the loop in php comes in handy.

The following code snippet will divide your loop into 2 columns wrapped in divs (div.left, div.right). Enjoy!

<?php 
query_posts('YOUR QUERY HERE');
$i = 0;
// Thanks to PaoloVIP for the suggestion to add round() for loops with an odd # of results
if ( have_posts() ) : while ( have_posts() ) : the_post();
  if ($i == 0) echo '<div id="left">';
  if ($i == (round($wp_query->post_count / 2))) echo '</div><div id="right">';
    the_content(); // or whatever custom content you desire
  if ($i == round($wp_query->post_count)) echo '</div>';
  $i++;
endwhile; endif;
?>

  • dex

    Nice peace of code you have here:=) Thank you sooo much it is short and sweet and easy to use. Best code for two columns i’ve found on the net… Thx!

    • spruceit

      Thanks so much! It’s really excellent to hear that it helped you out :-)

  • PaoloVIP

    Nice, but may not work if the total number of posts in loop is odd. Just add Round function:

    if ($i == ((round($wp_query->post_count / 2))) echo …

    • spruceit

      Right you are! Adding this logic to the post. Let us know if we can link to your website or portfolio as a thanks!

  • Zlatev

    No need to create a counter `$i` when `WP_Query` is already counting loops. It’s accessible at `$wp_query->current_post`. Cheers

  • http://lauraplusbooks.com/ Laura Plus Books

    I’m a newbie so sorry if this question sounds silly but what should I put as the css for div.left and div.right? Thank you!

  • tony black

    this is wonderful!

  • Edie Russell

    Sorry for chiming in so long after the post. I just ran across this code and am trying to implement it. It’s leaving off the final closing div (
    if ($i == round($wp_query->post_count)) echo ”;). I’m unsure how to fix this. Thanks for your time :o )

Talk to Us

Wise men have said, "All good things must come to an end", and so it was with Spruce. We began our first project in 2006, and completed our last in Fall 2013. It's been a wonderful experience, but now it's time to begin the next adventure.

Though...we wouldn't want to leave you hanging, now would we? Here are our top recommendations for world-class branding, design, and web development:

  • Kristina (KJ) Parish and Beam Collective:
    KJ provided the artistic vision that allowed Spruce to succeed, and we still think she's the greatest designer in the entire world. She's started a new collective with some talented developers, and is covering much the same territory as Spruce--design and development all under one roof, with a caliber of service and professionalism seldom seen in this business or any other. If you like what you see on the Spruce site, then definitely get in touch with KJ at kj@beamcollective.com
  • Permanent Art & Design
    Permanent is a nationally recognized design & branding firm out of Minneapolis, MN. They've been a long term collaborator and strategic partner over the past couple years, and we'd recommend them for medium to large sized businesses/organizations who are serious about putting their best foot forward. In addition to design, Permanent offers strategy and marketing services, plus in-house and networked developers. For more information contact Joseph Belk joseph@permanentadg.com
  • Nate Thompson
    A freelancer, Nate reminds us of ourselves back in the day. Smart, communicative, and skilled, Nate is our recommendation for small to medium sized businesses/organizations who have sites built on Wordpress or other open source content management solutions. With a background in both design and development, he's a one-stop shop for most web-related tasks. You can get in touch at nate.a.thompson@gmail.com
  • Kevin DeBernardi
    Designer turned developer, Kevin is embarking on a freelance web career after working as the in-house designer at the Museum of the City of New York. He's adept at translating his design ideas into custom PHP code, and is constantly expanding his technical palette. Kevin's a good choice for projects that don't quite fit into the Wordpress mold, and that would benefit from a consistency of presence and vision from design through execution. Kevin can be reached at kevin@analoglifestyle.com