Creating multi column layouts in WordPress

Here at Sweet-Apple we’re frequently being asked by web design agencies in and around Bath to develop web sites for them on a freelance basis. This is a good thing. We like it. We’re also keen to take their Photoshop visuals and make the website look as close to pixel perfect as time and budget permits. And one of the design features we come up against time and time again when creating WordPress themes is Category layouts that have multi columns.

When you’re making CSS layouts for multiple columns, typically you’ll do something like this:

<div class="first">Content here</div>
<div>Content here</div>
<div>Content here</div>
<div class="last">Content here</div>

So the question is how do you you append the correct class to the </div>? Inside the loop, something like this will see you forward…..

$i = 0;
$columns = 3;
//Start the_loop
$i++;
$columnPosition = "";
$mod = ($i % $columns);
switch ( $mod ){
case 1:
$columnPosition = "first";
break;
case 0:
$columnPosition = "last";
break;
default:
break;
}
//Append $columnPosition to the array of class on the post...
post_class($columnPosition)

Looking for a freelance web developer to quickly and efficiently create websites for you? Give us a call on 01380 830224 – we’d love to help…