Build Your Own Business Website header image

Thesis 2.0 Launch Party Part 4 – Create a 2 Column Layout

Difficulty Level -

Listed Under Lesson Subjects -

Applies to -

Here we go, Barking Chihuahua Cafe, this is what our com page looks like and this is what our homepage is going to look like when we get done. The first thing we’re going to do is take this 3 column layout and create a 2 column layout.

Thesis Skin Editor

We’re going to start in the Thesis Skin Editor and we’re going to look at Boxes. Now, these are HTML boxes as opposed to the boxes that we talked about here. Don’t confuse those two things. This box can create a box over in the HTML Box Editor but this is really just an HTML thing. If we look at the structure of the default theme, what we have is the body. Inside of that we have a container and this is a page width container so it sits in the middle of the site.

Inside the container, first we have a Nav Menu then we’ve got a header container. If we open up our header container, it contains the site title and the site tagline. If we look at the 3 column layout we have here, we have this container that holds the 3 columns, Column 1,Column 2 and Column 3. Column 1 has the WordPress loop and on the page, it has a single post box that is, it shows a single style of post like a page.

Content Column

In it, it’s configured to show the headline and the content although you can also add the author avatar, description, you could use an excerpt instead, number of comments, categories, tags, Thesis post image, Thesis thumbnail, WordPress Featured Image, any of those can go in here. If you define taxonomies, then custom taxonomies would also show up in this. You can drag a custom taxonomy into place and have that show up as well. That’s Column 1 which is a content column.

Widget Column

Column 2 is the widget column and it’s just Column 2 with the widgets setting in here and the same thing is true with Column 3. The footer, is just the footer container, it contains the Thesis Attribution and WordPress Admin Link. Those are the HTML elements that are showing up in the main page. What we’re going to do is create a brand new one, a new HTML element and that is going to be a box so we open up this thing that says, Add Boxes.

The type of box to add is going to be a container. We’re going to create an HTML container and we’re going to call it 2 Columns. We’re going to add the box, here it is. This button here shows or hides the box options. I’m going to open that up and that allows to me to set an HTML ID, an HTML class and if for some reason rather I want to hook around this thing, I could put a hook name in here and it’ll automatically create the hook.

Create the Hook

For example, in order for columns to work, I need this HTML class to match a package I’m going to define in a minute so the class is going to be column-32 which means in my jargon, the page is divided up into 3 parts but it only has 2 columns which means that 1 column is going to be 2/3 wide and the other column is going to be 1/3 wide. That’s my own way of keeping track of this because I’m going to use a columns-2 in a minute.

I’m just going to say the unique hook name, I’m going to call it main_content. We’re not going to actually use this hook, I just want you to see how that’s created. What it will do is, it will create thesis_hook_before_container_main_content, thesis_hook_container_main_content top, thesis_hook_container_main_content_bottom and thesis_hook_after_container_main_content. That’s what it’ll create automatically for hooks based on this name, main_content.

We’re not going to use the hook because you have to use programming to use hook and we’re not going to do any programming but that’s how you create your own hooks in Thesis. We can go to the Admin options and say we want this box to always open up by default in the template editor but I’m not going to choose that. This is good enough for me and we’ll just go ahead and close it then shift and drag to bring it into position.

Arrange Columns in the Container

If I want it in the container, I just drop it in the heading of this container like that, just drop it and now it shows up on the top. To move it within the container, I don’t need to hit shift so I can just move it here and I want to move it below the header so I got a 2 columns above 3 columns. Now what I want to do is take column 1 out of column 3 so shift, drag and drag it up into column 2 then I’m going to take column 2, shift drag and drag it up into column 2 then I’m going to take 3 columns out of this entirely. I’m going to shift drag and bring it over here and drop it here.

Now I have 2 columns here, except I’ve got them reversed so I got Column 1 at the bottom so I just drag it up and put it at the top so now I’ve got Column 1 and Column 2 and I’ve got this 2 columns thing. If I hit save template, we can go over and take a look at the site. It’s not going to look right but you’re going to see it looks different. The reason it doesn’t look right is because Column 1 is full width and Column 2 is full width because I haven’t created a package yet that defines this.

Create a Columns Package

However, you see if we go back over to the home page, it’s still retaining the 3 columns style because all I did was change the page template. Come back over to the Thesis Skin Editor, we’ll click on CSS and we’re going to create a new package. It is going to be a columns package and if we add the columns package, we’ll give it a name, let’s just call it 2 Columns. We’re going to give it a reference, I’m going to call it columns_32. I’ll show you what that reference is for in a minute and the CSS selector that I want is also going to be .columns-32.

Difference Between Selector and Class

Notice the difference between selector and class. Selector here will take any selector so you could put a # sign in front of this so you’re picking up the ID and you could even be more specific, you could add other selector elements. The selector can be as long as you want it to be so this is going to be a way for you to create very specific CSS for a very specific application.

It doesn’t just have to be a single selector in here but we’ve created this, named the 2 columns, give it a reference of columns_32, give it a CSS selector of .columns-32. Come over to options, select the number of columns, we’re going to select 2. Column 1 width in this case, is going to be 636px and I want it to float to the left. In column 1 padding, I’m not going to give it any top padding but the right padding is going to have 11px and the left padding is going to have 22px.

It’s important to note that the way this works is, this padding comes off of the overall width so 636 is the overall width of the column and 11px of padding and 22px of left padding means that the content is going to be 600px wide. So content of 600px with a right padding of 11px and a left padding of 22. Come over to Column 2, it’s going to be 300px, I’m going to float it to the right, I’m going to give it 30px of top padding here. Right padding is going to have 22px, left padding is going to have 11px and I’m going to hit save to that.

Automatic Clearing Divs

Now, if I wanted some additional CSS, I could actually write additional CSS right here if I felt like I need to but I’m going to need to. What this does is this automatically creates the CSS for this 2 column thing including clearing the divs. If you know anything about floats, CSS and HTML, when we said we want a one thing floating left and another thing floating right, this automatically creates the clearing of those divs so that thing that happens below it, doesn’t try to float beside it.

In order for this to show up, we have to take this reference and place it over here. You can have packages that you don’t actually write CSS for. You could have packages that you want to keep around but you don’t want it to be added to your skin because you don’t need it at the moment. There isn’t have to be a one to one correspondence between your packages and this. This is where you tell Thesis what CSS you want to write.

In this case, we need to add the reference which is $columns_32. If we hit save and compile, it’s now written the CSS. I think I must be missing something, columns_32, $columns_32. I called the CSS selector columns-32, must be a different CSS selector so we come back over to this and we look at the CSS selector, it’s column_32, not columns. This is where that correspondence has to happen. This HTML class needs to be the same as the CSS selector.

Notice that the HTML class doesn’t have a period in front of it? That’s because it’s a class so it automatically has a period. If you put a period in here, it’s going to confuse it. Same thing with HTML ID, if you chose to put an ID in, you don’t have to put the # sign in, it automatically supplies the # sign. Save the template, come back over, refresh it and lo and behold, now what we have is a 2 column template with the sizes that we specified that we wanted. Our pages have that and our home page still has this.

4 Comments… add one
4 comments… add one
  • slstay October 13, 2012, 8:38 am

    Hi Rick. Thank you for making these videos–they’re extremely helpful!

    While I’m very excited about many of the new features of Thesis 2, I’m also struggling to understand how some of them are “better” than the old version. For example, in this video you spent roughly 10 minutes building a 2 column layout. We could do that in 2 seconds in the old version by just selecting “2 columns” from the Thesis – Design Options – Site Layout section.

    In the old version, I could also quickly and easily setup several other elements of my site in just seconds (e.g. adding analytics tracking code, setting up noindex/nofollow, removing admin link from the footer, and on and on.) It seems with this new version that accomplishing all of that is much more convoluted and time consuming.

    So is there still a fast way of accomplishing those types of things with Thesis 2?

    • Rick Anderson October 13, 2012, 9:21 am

      Steve, some things may in fact seem more complicated at first. The reason it took 10 minutes to create the 2 column layout is because I was working from a canvas (skin) that didn’t have a 2 column layout already. In the future, it is more likely that you will begin from a skin that is either a 2 column skin or has a 2 column template as well. What you may have overlooked in your analysis of this is that once completed with the 2 column template my site had BOTH 2 column and 3 column layouts. That specifically is something much more time consuming to create in Thesis 1.8.5 – and there is no way to do that without learning some code.

      Adding tracking scripts is just as easy as in the previous version, except that in this version you can also have template specific tracking scripts – again without resorting to any custom code.

      Noindex, nofollow are the same in both versions both on a site wide basis and on a page by page basis.

      Removing the admin link from the footer is simply drag and drop. So is removing the attribution – which once required code.

      Now imagine you want an entirely different layout for your front page – that requires coding ability in 1.85 but none in 2.0. Say you want a blog specific sidebar that is different from your pages. Again, this requires no code. Did you notice how much easier it was to create a custom header? How about an entirely different header for the front page?

      So, some very simple things became more complicated but all of the really interesting and hard stuff just became a breeze.

      • slstay October 17, 2012, 12:07 pm

        I see. Thank you for the insight. I am very excited to have the ability to easily customize each page (headers, javascript code, etc.)

        Do you know when or where we might be able to download various Thesis 2 templates (e.g. 2 Column or No Sidebar templates)?

        • Rick Anderson October 17, 2012, 4:54 pm

          We’ll start seeing the official skins fairly soon I believe. I’ve already seen beta version of various styles of the Classic skin. I presume that the where is at DIY Themes.

Leave a Comment