Posts in Columns – A New Twist on an Old Problem

To organize posts into three columns (edit: semantically more correct would be to call it ‘three posts per row’ as this is the way the posts are organized), you first need to generate a column dependant css class for each post; this will be added to the post div within the loop.

The core trick to generate different css classes for posts in the first coliumn, the second column, and the last column:

<?php $column = ($column == '') ? 'first' : (($column == 'first') ? 'middle' : (($column == 'middle') ? 'last' : 'first' )); ?>

This line of code needs to be within the loop, just before the post div.

To achieve more or less the same, you could obviously also use a counter variable and the modulus operator, as i have elaborated on in my earlier article ‘More-Than-Zebra style WordPress loop’. However, the above method is simpler and easier to apply within a single line of code.

The second step is to add this as a css class to the post div:

a – assume a theme without the use of ‘post_class()’; the typical opening div would look like:

<div class="post" id="post-<?php the_ID(); ?>">

This is changed into:

<div class="post <?php echo $column; ?>" id="post-<?php the_ID(); ?>">

b – in a theme using the ‘post_class()’, the new code would look like:

<div <?php post_class($column); ?> id="post-<?php the_ID(); ?>">

Third and last step: to tell the browser what to do with the new css classes, add some styles to style.css of the theme:

/* .first, .middle, .last styling of posts on home page for three column */
.first, .middle, .last { width: 32%; float:left; clear:none!important; }
.first { margin-right: 2%; clear:both!important; }
.middle { margin-right: 2%; }

Final details depend on the existing theme.

edit & ps:
if you just want to mark the first post in each row – for instance to add the ‘clear:both;’ and a different margin there – try to work with:
(example for 5 columns)

<div <?php $column = ($wp_query->current_post%5 == 0) ? 'first' : ''; post_class($column); ?> id="post-<?php the_ID(); ?>">

10 Replies to “Posts in Columns – A New Twist on an Old Problem”

  1. Unbelievable – I spent days trying to get this to work. Thank you so much for this code, I had it working in 5 minutes – absolutely awesome!

  2. Thank you so much! I spend all day trying different solutions to have a three column display, each column having it’s own class…your solution is so easy to implement!

  3. sorry about the last post…ive changed the code
    //echo '<div id="post-'.get_the_id().'" class="'.headway_post_class(false).'">';
    echo '<div id="post-'.the_ID().'" class="'.headway_post_class($column).'">';
    and nothing has changed for me…any suggestions?

    1. Hi Lee,
      difficult to comment on your isse without seeing your site.
      please consider joining the support forum to ask your questions there; it is a better space to post code, and there are more helpers – including me – to look at your problem .

  4. I’m using headway theme and I am having difficulty implementing these steps. i’ve changed
    [ //echo ”; ]
    >>to >>
    [ echo ”;]
    and nothing is changing for me…any suggestions.

  5. Hi Alchymyth,

    Thank you for taking the time to reply.

    And yes, I am now looking into doing this using the count variables.

    1. My biggest threat doesn’t come from other businesses. Extremely excellent short page. You really should write a lot more new content, I’m certain many people use your website to find the latest insider insights for the industry. I’m kind of bored to death at work so I decided to browse your article on my laptop during lunch break. Your writing style reminds me of my neighbor.

  6. Hi,

    Thanks for sharing your code.

    I am trying to work out if this will sort my needs.

    I aim to make a 4 column/3 row front page which only pulls the post thumbnail and accompanying permalink to each post.

    Additionally, on the bottom row, I need to leave the first two columns empty, as these will contain other elements such as a category list etc.

    Will your code work in this way and if so, would you be able to give me a few pointers?

    Anyway, thanks for any advice you may be able to offer.

    1. Hi James,
      your idea might work better with a counter variable; i.e. to help to add an extra css class to all posts in the first column, and to add your other elements into a div after the eightth post. details will be quite complex, as you may need to provide alternatives if there are less than 10 posts in that page.
      if you encounter problems along the way, consider joining the if you haven’t done so already.
      i wish you all the best getting your project to work.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.