Sometimes it is the simple things that are hard to find.
A basic structure to arrange posts into three columns:
<div id="column-wrap">
<?php $count = 0;
while(have_posts()) : the_post(); ?>
<div class="box<?php if( $count%3 == 0 ) { echo '-1'; }; $count++; ?>">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<!--and other output of the loop -->
</div>
<?php endwhile; ?>
</div><!--end column-wrap-->
The minimal styles needed for the three columns:
.box-1 { float:left; clear:left; width: 30%; margin-left: 0; }
.box { float:left; width: 30%; margin-left: 3%; }
-
<div id=”column-wrap”>
-
<?php
-
$count = 0;
-
while(have_posts()) : the_post()
-
?>
-
<div class=”box<?php if( $count%3 == 0 ) { echo ‘-1’; }; $count++; ?>“>
-
<a href=”<?php the_permalink(); ?>“>
-
<h4><?php the_title(); ?></h4></a>
-
<!–and other output of the loop –>
-
</div>
-
<?php endwhile; ?>
-
</div><!–end column-wrap–>
-
—————-
-
STYLES – EXAMPLE
-
.box-1 { float:left; clear:left; width: 30%; margin-left: 0; }
-
.box { float:left; width: 30%; margin-left: 3%; }
For 4 column posts what need to be changed?
$count%4 == 0
Is this correct? Let me know.. Tjanks!
correct – and change the CSS.
Pingback: WordPress Post 3 Columns | Herwin's Blog
26/09/2012 | […] to: alchymyth Like this:LikeBe the first to like […]
please I am having problem with three column issue, my image posts with wordpress theme in straight inline not column , with your example here how do I paste this attribute sample you just made here, where do I past it in my theme
please ask your question in the forum at http://wordpress.org/support/ – there are more helpers, and you have space to post your code, and post a link to your site. I visit the support forum regularly, and might be able to help you there. good luck.