How to display blog posts dynamically in 2 or 3 columns in wordpress

I want to horizontally display my blog posts in sequence in two or 3 columns so that they stack together dynamically.

here is the loop that I want to use or please suggest a proper method


<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?>

<div id="left-column">
<h1><?php the_permalink(); ?></h1>
<?php the_content(); ?>
</div>

<?php endif; endwhile; else: ?>
<div>Alternate content</div>
<?php endif; ?>

<?php $i = 0; rewind_posts(); ?>

<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>

<div id="right-column">
<h1><?php the_permalink(); ?></h1>
<?php the_content(); ?>
</div>

<?php endif; endwhile; else: ?>
<div>Alternate content</div>
<?php endif; ?>

Here is what the CSS code may look like :


div#left-column {
 width: 333px;
 float: left;
 clear: none;
 }
div#right-column {
 width: 333px;
 float: right;
 clear: none;
 }

Advertisements

Software Engineer at The Jaxara IT Ltd , Dhaka , Bangladesh

Tagged with:
Posted in Wordpress
5 comments on “How to display blog posts dynamically in 2 or 3 columns in wordpress
  1. apfernandez says:

    Where do you add the loop code?

  2. ekspanzi says:

    Whoa, thank you

  3. where do I have to put those codes?

  4. where do I have to put those codes in order to work?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: