create a page with a 2 or 3 column content layout?

I know it’s 6 months later…but I found myself with the same problem.

on https://www.richard-wilkinson.com

I’m learning as I go so very slow progress (and probably very messy code!).

I’m trying to make a portfolio page by creating an individual loop called category-5.php (when 5 = portfolio category ID)

I can get the basic CSS to work (still struggling with sidebar/footer issues), but I’m struggling with the actual loop.

Doodlebee – you were excellent in your solution last time, and it looks like you’ve maybe solved the problem again here. The problem is I dont totally understand the solution!

Where, in your solution, it says ‘whatever the post code is here’…where do I find the code I’m after. It’s too baffling to get my head around, but I’m sure it’ll be obvious when I’m pointed in the right direction.

Did anyone else have any success using this technique?
I think it’s quite an important topic as it is SO useful for photoblogs/portfolios/galleries etc.

Thanks.

Where, in your solution, it says ‘whatever the post code is here’…where do I find the code I’m after.

Wow – this *is* old – I barely remember taking part in this solution, and *just* happened on it again! LOL Lucky you I actually chose to read this, or I would have missed it!

Okay, well, when I say “whatever the post code is here”, it’s whatever code you’re using to get those posts to be in the format you choose. Like I said, I’ve used the solution provided above for non-dynamic sites – so the content never changes. So whatever the post code would *be* to make the posts themselves change, while the layout remains the same – *that* is the hard part.

If I remember correctly, my line of thought at this was to basically use the regular posting code:

<div class="post" id="post-<?php the_ID(); ?>"> and then continue on with the rest of the post-y stuff and usual. The Post IDs will change, so using CSS to pick out those particular IDs would be ineffective. But, in theory, if you just set each dive to the left, and make them so wide, then they’ll start to go three posts wide. Because of the nature of floated elements, if the containing div is only wide enough to have three objects side-by-side, then the fourth one will drop under the first. That’s why *all* of them are floated left.

Like I said, this in *in theory*. I don’t know for a fact that this will work, and it may be a little tricky. But I think it *could* be done (in fact, I’m now thinking of creating a theme that could do this – that would be pretty cool.)

But anyway, to answer your question, the section of code above would end up looking like so – again, *in theory*. The original:

<div class="post<?php whatever the post code is here ?>">
Post 1 here
</div>

with the actual “stuff” in it (using the default template):

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>

<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>

<p class="postmetadata">Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
</div> <!-- closing post -->

<?php endwhile; ?>
<?php endif; ?>

Hope that helps.

Doodlebee! I thanks my lucky stars you exist! I didn’t think this would be spotted – what luck!

Trying it now..i’ll let you know.

Thankyou so much.

So I’ve just digested & played around a bit….and what you’re suggesting before you answered my initial question seems to make sense & be very simple.
Just set each div to the left, and make them 150 wide (my containing div being 450 wide), then they’ll start to go three posts wide.

So, if I understand correctly, this would mean there’s no need for individual div IDs for the posts? Just set them all to the left, and they will fill the horizontal space until its full, then overlap to the next row?
But that isn’t working for me. (big surprise!)

Here’s the problem page (ignore the sidebar/footer probs)
https://www.richard-wilkinson.com/category/portfolio/

Here’s my loop for the portfolio page. (I’m dealing with thumnails in the_excerpt here btw. 95 px across, linking to lightbox instead of the post):

<?php
/*
Template Name: Categories2
*/

get_header(); ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="portfolioentry">
         <div class="blockcontent" id="blockcontent-<?php the_ID(); ?>">

         <a href="<?php the_permalink() ?>"><?php the_excerpt(); ?> </a>
         </div>
<hr class="clear" />

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

<hr class="clear" />

<?php endwhile; ?>
<?php endif; ?>

and the relevant css:

#blockcontent div {float:left; width:120px;}
hr.clear {clear:both; visibility:hidden;}

Any thoughts?

Thanks again again!

Well, a BIG thing that’s wrong is your search bar isn’t closed. You have the opening input tag, but you didn’t close it. That would throw *anything* out of whack.

Also, you’re using clearing elements after each post. That’s why they aren’t aligning side-by-side. If you’re clearing the float, then the next one will drop down. No clearing element should be used.

Oops. Good spot, Doodlebee, thanks for that. It’s a cut & shove job so I know its very messy.
Still figuring it out…

Figured it out. It works great for the thumbnails.

(Ignore the extra <a> in the strip_tags allow: I wanted these to link just to their larger images in lightbox. Remove that (so it reads

<a href="<?php the_permalink (); ?>"<?php if ( get_the_excerpt() ) echo strip_tags(get_the_excerpt(),'<img>'); else the_ID(); ?> </a>

for links to single posts.

Here’s the code:

<?php $r = new WP_Query('showposts=10');
	if ($r->have_posts()) :
?>
          		<div class="portfoliocontent"
			<?php  while ($r->have_posts()) : $r->the_post(); ?>
			<a href="<?php the_permalink (); ?>"<?php if ( get_the_excerpt() ) echo strip_tags(get_the_excerpt(),'<img><a>'); else the_ID(); ?> </a>
			<?php endwhile; ?>
                        </div>  

<?php endif; ?>

Thanks for your help doodlebee.
..and for your patience!