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. Art of Blog 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?

Sign Up Now for Free Updates and Exclusive Content:

Learn how to write killer content, get more traffic, make money, and more by entering your email below:

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.

Leave a Reply

Comments

  • This is awesome Eric. Not gonna lie, I was contemplating getting a refund for 2.0, but after seeing some of the stuff that’s possible with it, I’m keeping it.

    Keep these tutorials coming!

  • Hello Eric,
    Great tutorial! I tried out Thesis 2.0 when it was first released. I have to admit, I found it a little confusing and hard to work my way around. I prefer customizing using the custom.css and custom_functions.php files in the older versions of the theme. However, seeing this tutorial I think I’ll have another go! Thanks for the tut!
    Best

    Claire :)

  • Anwar says:

    I’ve never worked with Thesis and I’ve just watched your video, but it seems you have to be kinda into HTML and CSS to be able to get stuff like custom sidebars done. I’ve been a Genesis user for some time now and I love the way you can choose your layout (no sidebar, 1,2,3, etc.) on any single page just with one click.

  • Matt Beaty says:

    God Bless You Eric! I was ready to body slam my laptop here in Starbucks but thank God I stumbled across your tutorial because this is all starting to make sense now. The true power and flexibility of Thesis 2 is now coming to light. Please keep these awesome tutorials coming. You’re a life saver!

    Best Regards,

    Matt Beaty
    CEO
    God’s Economy Radio, LLC

  • Sorry, I had a few typos in the first comment. Please ignore and use this one instead:

    I’m not too crazy about version 2.0. It seems like it is great for the coders, but i am really struggling. in thesis 1.8 I could switch to 3 column in 3 mouse clicks and 5 minutes. in version2.0 i am ready to go postal after spending 2 hours trying to get a 3 column set up

  • Great tutorial but Thesis 2 requires a lot of learning to unleash its potential. To be honest I’m starting to find coding easier than actually using Thesis 2..

  • Hi there,

    Great tutorial, I was able to follow it all the way through and my sidebar 2 showed up in widgets. I was able to add widgets to it, saved them but they are not showing up on my blog? Any ideas as to why?

    Thanks in advance for your help,
    Anna

  • Justin says:

    Thanks Eric. I just bought Thesis a few days ago and you’re definitely spot on with the learning curve. Thanks a lot for the tutorial, It helped a LOT.