40 | Easy Coding for WordPress: Posts in 3 Columns

g+

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%; }

  1. <div id=”column-wrap”>
  2. <?php
  3. $count = 0;
  4. while(have_posts()) : the_post()
  5. ?>
  6. <div class=”box<?php if( $count%3 == 0 ) { echo ‘-1’; }; $count++; ?>“>
  7. <a href=”<?php the_permalink(); ?>“>
  8. <h4><?php the_title(); ?></h4></a>
  9. <!–and other output of the loop –>
  10. </div>
  11. <?php endwhile; ?>
  12. </div><!–end column-wrap–>
  13. —————-
  14. STYLES – EXAMPLE
  15. .box-1 { float:left; clear:left; width: 30%; margin-left: 0; }
  16. .box { float:left; width: 30%; margin-left: 3%; }
This entry was posted in Easy Coding for Wordpress, Tips & Tricks and tagged , , , . Bookmark the permalink.

5 Responses to Easy Coding for WordPress: Posts in 3 Columns

  1. Satish comments:

    For 4 column posts what need to be changed?

    $count%4 == 0

    Is this correct? Let me know.. Tjanks!

  2. Pingback: WordPress Post 3 Columns | Herwin's Blog

    g+

    26/09/2012 | […] to: alchymyth Like this:LikeBe the first to like […]

  3. Sampson jerry comments:

    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

    • alchymyth replies:

      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.

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=""> <s> <strike> <strong>

*