I would like to create a three columns with 3 selected posts. They must include image and title. Like this http://i.imgur.com/tXg0bv3.png How to create it in CSS and HTML? This is very important for me, I can't find something like that. Thanks.

I'm sorry, I did not mention. This columns must be outside the loop. This is a code for post outside the loop:

$recent = new WP_Query();
if($recent->have_posts()) : while($recent->have_posts()): $recent->the_post();
<div class="post_image_th">
<?php the_post_thumbnail('mainImageCropped'); ?>
<div class="post_content_spot">
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
<li class="user"><?php echo get_avatar( get_the_author_meta( 'ID' ), 32 ); ?><?php the_author_posts_link(); ?></li>
<li class="comments"><?php comments_popup_link('0 comments &#187;', '1 comment &#187;', '% comments &#187;'); ?></li>
<?php endwhile ?>
<?php else : ?>
<p> Nothing find </p>
<?php endif ?>
  • 1
    You can have more than one loop on a page. Run a custom loop for the 3 columns and then run your main page loop below that. Commented Aug 25, 2013 at 20:30

2 Answers 2


You might not have expected this kind of solution but it is worth knowing that there is also a front end solution for this kind of problem.

The css3 spec have a new feature called column-count, which will automatically render your text in multiple columns

Here is a simple example from w3schools

-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */

Here is another

I know this only works in modern browsers, but people have started using it already!

And good news there already a fallback jquery plugin for this called Columnizer


You could do something like that :

$i = 0;
$args   = array('posts_per_page' => 3);
$recent = new WP_Query($args);
if($recent->have_posts()) : while($recent->have_posts()): $recent->the_post();

<div class="post-in-column">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
<?php the_excerpt(); ?>

<?php echo ($i % 3 == 0) ? '<div class="clear"></div>' : ''; ?>
No news.

Then a little bit of CSS :

.clear {clear:both;}
.post-in-column {float:left; width: 33%/* maybe you'll need to set fixed width */; }

I haven't tested it but it should work.

  • I'm sorry, I did not mention. This columns must be outside the loop. I add code to my question.
    – Krystian
    Commented Aug 25, 2013 at 17:18
  • No problem just replace with your own Query.
    – JMau
    Commented Aug 26, 2013 at 9:08
  • Thank You very much, but now my posts, display like this: i.imgur.com/5d6QVk8.png (1-1-1) I want (1-2-3). Because I use additional loop I don't know how to fix it.
    – Krystian
    Commented Aug 26, 2013 at 15:12
  • Can anyone help? ;)
    – Krystian
    Commented Aug 27, 2013 at 14:58
  • I've edited code. Do not use showposts it 's deprecated, replace it with posts_per_page
    – JMau
    Commented Aug 27, 2013 at 15:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.