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

Break my queries into 2 columns and refine code WordPress

  • SOLVED

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: http://wordpress.pastebin.com/A9eWeaL7

Hope you can help.

Thanks,
Karl

Answers (4)

2010-04-13

Erez S answers:

Here is some guides that explain how to do 2 columns: kriesi.at/archives/wordpress-display-content-in-multiple-columns
cre8d-design.com/2008/03/how-to-organize-posts-into-two-side-by-side-columns-in-wordpress/
wpgarage.com/code-snippets/publishing-wordpress-posts-in-two-columns/

h4x3d.com/wordpress-posts-in-two-columns-design-code/
digwp.com/2010/03/wordpress-post-content-multiple-columns/
enjoy


Erez S comments:

http://wordpress.pastebin.com/nqnspkMV
try it,i reduced the queries by one per category and changed it to be in columns
enjoy


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.

Best,
karl


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?

Thanks


Erez S comments:

http://wordpress.pastebin.com/4fYC3CgR
Changed it to divs,enjoy


Erez S comments:

My bad,here is small fix:
http://wordpress.pastebin.com/JgqU4SRU

2010-04-13

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: http://tinypic.com/view.php?pic=10ogrr8&s=5


Karl comments:

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

2010-04-13

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.

2010-04-13

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>

<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: ?>

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

<?php endif; ?>


Then you will need a few css rules:

.floatRight {
float:right;
}
.floatLeft {
float:left;
}
.clear {
clear:both;
}


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.