45 | Posts in Columns – A New Twist on an Old Problem

g+

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(); ?>">
This entry was posted in Easy Coding for Wordpress, Tips & Tricks, WordPress and tagged , , , , , , , , , . Bookmark the permalink.

9 Responses to Posts in Columns – A New Twist on an Old Problem

  1. Margie comments:

    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. Tony comments:

    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. Lee comments:

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

    • alchymyth replies:

      Hi Lee,
      difficult to comment on your isse without seeing your site.
      please consider joining the wordpress.org 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. Lee comments:

    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. Andrea comments:

    Thank you so much for this code!!!

  6. James comments:

    Hi Alchymyth,

    Thank you for taking the time to reply.

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

  7. James comments:

    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.

    • alchymyth replies:

      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 http://wordpress.org/support/ 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.

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>