Two Column Layout

Monarch Butterfly on Buddleia Flower
Monarch Butterfly on Buddleia Flower - March 9, 2011

The question was raised as to how easy (or not) it would be to have a two column layout, in this case in WordPress, that would be easy for end users to maintain and use.

Specifically, pictures with captions in a left column, and an unlimited amount of text in the right column.

So, let’s do a test case to see how this could best be done!

I’m going to ramble on a bit here so I have more text to work with without resorting to “Lorem ipsum dolor sit amet” …

Basically, it *should* be easy to achieve with a small amount of custom CSS that the developer can add to the site styles easily, and some simple instructions for the client / end user to add one minor change to any left column image.

We start with a page that has a single column layout. Here you have at least two options depending on whether you use the Genesis framework and themes or default WordPress themes (eg TwentyEleven). I will try to look at both options here.

With StudioPress Genesis

Select the single column layout from Genesis Layout Settings. In the Custom Body Class section put your class name, in this sample case I used “twoColumns”. Genesis will add the “twoColumns” class to the body tag.

To specifically apply the styles to only the text, add it’s enclosing class – in this case “entry-content” to the style rule. Go to your style sheet – Appearance, Editor, and add the styles for your 2 column layout (I usually add extras at the bottom of the style sheet):

.twoColumns .entry-content {
margin-left: 300px;
padding-left: 20px;
border-left: 1px solid #CCC;
}

To put your images and their caption in the “left column”, create the following style rule:

.twoColumns .entry-content .wp-caption {
margin-left: -300px;
}