Ask your WordPress questions! Pay money and get answers fast! (more info)

Break my queries into 2 columns and refine code


Hi all,

Is there a way to break my query block into 2 columns? Currently the queries loop through master category 2265 to show child cat title, post tiltle image & excerpt then 3 more titles of each child category.

Problem is I want to spilt this over 2 columns and not sure how. Can anyone assist?

Also my code does create a lot of queries. Is there a way my code could be refine to lessen queries?

Here is code:

Hope you can help.


Answers (4)


Erez S answers:

Here is some guides that explain how to do 2 columns:

Erez S comments:
try it,i reduced the queries by one per category and changed it to be in columns

Erez S comments:

I see you saw my message,did you try it? if not working just let me know and I'll fix it

Karl comments:

Ah, just out and about at the moment. Replying from my phone.
will be back in about 3 hours.


Karl comments:

Hi erez213,

Thanks for your code. My only concern is you have used tables. That is something I really didn't want to use.

I like Merne Asplund suggestion though, can that be implemented instead of your tables?


Erez S comments:
Changed it to divs,enjoy

Erez S comments:

My bad,here is small fix:


Buzu B answers:

It is possible. I guess it is also possible to reduced the amount of queries to the data base. I would help a lot if you showed an image of what it is you want to accomplish. Just seeing the code is not enough, or at least not the easiest way.

Karl comments:

Sorry about that. This is what I want my code to produce in 2 columns:

Karl comments:

Thanks for the links but my PHP knowledge is minimal so any coding help appreciated based on my existing code block.


Jarret Minkler answers:

Do you want the posts to go down the first column, then restart on the second column, or go across horizontally then down the page?

Karl comments:

Doesn't matter too much really. No real order.


Merne Asplund answers:

Why not use some simple PHP logic and CSS to alternate the sides they will be on. I've implemented a counter and using the modulus operator we can inject different classes.

Add this above the loop:

<?php $counter = 1; ?>

...and this in the class attribute of the post container:
<?php if($counter%2 == 0){echo 'floatRight';} else { echo 'floatLeft'; } ?>

...and this just above the endwhile:
<?php if($counter%2 == 0){ echo "<div class='clear'></div>";} ?>
<?php $counter++; ?>

Your elements will look different, but here is what it looks like together:

<?php $counter = 1; ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class="post <?php if($counter%2 == 0){echo 'floatRight';} else { echo 'floatLeft'; } ?>" id="post-<?php the_ID(); ?>">

<h1 class="storyTitle"> <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h1>
<div class="meta">
<?php _e("Filed under:"); ?> <?php the_category(',') ?> --
<?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(__('Edit This')); ?>

<div class="storyContent"><?php the_content(__('(more...)')); ?></div>

</div> <!--closing .post -->

<?php comments_template(); // Get wp-comments.php template ?>

<?php if($counter%2 == 0){ echo "<div class='clear'></div>";} ?>
<?php $counter++; ?>

<?php endwhile; else: ?>

<?php _e('Sorry, no posts matched your criteria.'); ?>

<?php endif; ?>

Then you will need a few css rules:

.floatRight {
.floatLeft {
.clear {

You will need a few more to make it pretty.

Keep in mind that this is assuming your posts are similar in size or you are only showing a certain amount of each post before the '..more.'

Karl comments:

That's a nice idea. Let me see if it suits my code.

Thank you.