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. Ein toller Fellsattel zeichnet sich in erster Linie dadurch aus, dass der Fellsattel ähnlich geeignet für das Pferd wie für den Reiter ist. Das muss vorrangig der wichtigste Faktor beim Erwerb des Sattels sein. Jetzt kann man ins Detail einsteigen und präzise Merkmale der jeweiligen Varianten bedenken. Selbstredend spielt auch hier das Alter die gewisse Rolle. Für Kinder eignen sich insbesondere rutschfeste Sattel. Bei Erwachsenen kann jener Punkt beinahe außer Acht gelassen werden. Gleich entscheidend ist außerdem der Komfort des Fellsattels. An dieser Stelle bietet sich ganz stark Lammfell an. Dieser Stoff bzw. dieses Material ist sehr soft und zur gleichen Zeit schonend fürs Pferd. Ein Fellsattel aus Lammfell ist mit großer Wahrscheinlichkeit die beste Wahl die ein Reiter treffen dürfte. Jedoch liegt dieser Sattel unter anderem kostentechnisch enorm höher als Alternativen.

  2. 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!

  3. 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!

  4. 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 .

  5. 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.

  6. Hi Alchymyth,

    Thank you for taking the time to reply.

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

  7. 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 *