Thesis 2: How to Create a 3-Column Layout

There’s no denying that Thesis 2 has a bit of a learning curve. But, after talking to Matt and Chris, I am pretty stoked about some of the stuff that is already in Thesis 2, and even more excited for what they have planned for the future.

So, today I decided that it was time to start learning Thesis 2 and I made it my goal to learn how to take the Thesis Classic skin and convert it to either a 1-column or 3-column layout. Below is what I came up with.

A Quick Note

Thesis 2 is not a typical WordPress theme. Thesis 2 is also nothing like Thesis 1.x. It is not as easy as choosing one option on the backend to create a new layout with your theme.

You will need a basic foundation with HTML and CSS. Blogging.com has a great introduction to CSS that was written by Adam Baird. If you are not experienced with CSS, I recommend you check out Adam’s CSS introduction before going any further with this tutorial.

How to Get a 1-Column Layout

Getting a basic 1-Column Layout with Thesis 2 is actually relatively simple. Here are the steps.

1. Navigate to the skin editor

2. Hold down Shift and drag blue boxes from the Sidebar column onto the Content column.

Next, you will need to reposition the blue boxes. Drag the two blue boxes below the Prev/Next box.Thesis 2 Skin Editor 1 Column

 

3. Navigate to the CSS editor and select the Columns package.

Change the Column 1 width to 900 px and set the alignment to default.

Thesis 2 - 1 Column Settings

4. Remove additional CSS within the Columns package.

Thesis 2 Additional CSS

These 5 steps will give us a basic single column layout of 900 px. Please keep in mind that you will likely need to add some CSS to style your website to your liking. To start out, I would suggest you remove the additional CSS within the Columns package.

How to Get a 3-Column Layout

For a 3-Column Layout, let’s start by creating our 3rd column. To do this:

1. Navigate to the Skin Editor.

2. Add a new Container Box.

Thesis 2 Sidebar ContainerI would suggest you name it Sidebar 2. This is what we will use to hold our new Sidebar.

At this point, you can also go ahead and create an extra text and widgets box to add to your Sidebar 2 container.

3. Hold the Shift button as you drag your box onto the Columns container.

Once you drop the box on the columns container, you can then position the Sidebar 2 container below the Content and Sidebar containers. (Yes, I know that’s a lot of words. I will include a video!)

Once you have included the Sidebar 2 container, we can jump into the CSS editor and create our 3-column template. Let’s do that.

4. Navigate to the CSS editor, then click on the Columns package. Then click on the options tab.

Thesis 2 Columns Package

5. Click the drop down and select 3 columns.

At this point you’ll notice that Sidebar 2 is showing up within the first Sidebar. This is because we have not reserved any place for Sidebar 2. Keeping in mind that we have 900 px to work with, let’s edit the Column package CSS to get a proper 3-column layout.

6. Use these settings below to get a 3-column layout.

Thesis 2 Column 1 Settings

Thesis 2 Column 2 Settings

Thesis 2 Column 3 Settings

Thesis 2 Column 3 Padding

7. Remove additional CSS in the Columns package.

Thesis 2 Additional CSS

What Do You Think?

Thesis 2 is a very powerful theming system. The flack it has received lately is not all justified and as documentation and tutorials are released Thesis 2’s true powerhouse ability will be understood.

I want to know what you think. Now that I’ve showed you how to build a 1-column and 3-column layout in Thesis 2, do you feel more confident about this theme?

What other content would you like to see about Thesis 2?

Eric Binnion is a computer science student at Midwestern State University. When Eric is not online, he is usually volunteering in his community or enjoying time with his family. You can find Eric on Twitter.

Written by Eric Binnion

Eric Binnion is a computer science student at Midwestern State University. When Eric is not online, he is usually volunteering in his community or enjoying time with his family. You can find Eric on Twitter.

«
»

Comments are closed.