0

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:

<?php
$recent = new WP_Query();
$recent->query('showposts=1');
if($recent->have_posts()) : while($recent->have_posts()): $recent->the_post();
?>
<div class="post_image_th">
<?php the_post_thumbnail('mainImageCropped'); ?>
</div>
<div class="post_content_spot">
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
<ul>
<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>
</ul>
<?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. – Charles Clarkson Aug 25 '13 at 20:30
0

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

div
{
column-count:3;
-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

0

You could do something like that :

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

<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(); ?>
</div>

<?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 Aug 25 '13 at 17:18
  • No problem just replace with your own Query. – JMau Aug 26 '13 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 Aug 26 '13 at 15:12
  • Can anyone help? ;) – Krystian Aug 27 '13 at 14:58
  • I've edited code. Do not use showposts it 's deprecated, replace it with posts_per_page – JMau Aug 27 '13 at 15:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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