Thesis 2.0 Guide – All About Columns Galore

Thesis 2.0 has a unique built in set of options to help you build columns, and I’m not just talking about 1, 2 or 3 columns, I’m talking about the ability to build columns like never before. As different as it may be, Thesis 2.0 gives you the ultimate control over your layout. This tutorial will show you exactly how to do just that . But first we need to first look at how Thesis 2.0 deals with columns.

By the end of this tutorial you will be throwing up columns like the Romans were when laying down roads.

You ready?

Let’s begin!

Thesis 2.0 Columns

Thesis 2.0 comes with a pre-defined CSS package called Columns. You can select this from the Packages drop down menu.

If you select to create a new package, a pop up screen will appear. The first tab looks like this.

Here you can Enter the name of the package. The reference, which is what you use to add it to the style sheet with the &reference and finally the selector, which is how Thesis 2.0 knows which box to style. More on that in a moment.

So here’s the deal…

Thesis 2.0 already has the column classes built in.

  • Columns 1 = c1
  • Columns 2 = c2
  • Columns 3 = c3
  • Columns 4 = c4

When you give your box a class via the HTML editor and options for the box like the one below.

Thesis 2.0 automatically puts the id/class and the column sub class together for you.

So your columns will look like this for 2 columns.

  • columns-2 > c1
  • columns-2 > c2

So that means the two containers inside the main container need to have the class c1 & c2. You will see exactly what I mean further down.

When you change the options in the columns CSS package under the options tab which looks like this.

Each Column has these options available for you.

At the top you can select the number of Columns using the drop down menu.

Then for each column the following options apply.

Column Width – the width of of the column set in (px) by default, you may also use other units for expressing length. Such as (%) (em) (pt).

Column Alignment – otherwise know as floating, this allows you to choose the direction in which the column with float, because of the way that divs work, if you intend 2 or more columns to sit side by side, you will have to float them left or right.

Padding – we covered this in a previous tutorial, but just for extra clarity, padding adds space around the inside edge of the box, in our case the column. The end results is that the content inside the column is pushed away from the edge. Here you can specify by how much by entering say 10 in each box, which would add 10px worth of padding around the inside edge.

Again by default(px) is used, so just add the numbers unless you want to specify a certain unit.

Notice – there is no option to add a margin. That’s because margins do the same thing as padding but on the outside, so this can mess your dimensions up, primarily the width. So to avoid this, the option is not here.

Now we will create a 1 – 4 column layout.

1 column layout

To make a 1 column layout you will need 2 containers.

The first container we will call Column 1, this is just to house the actual column.

The second container will be the actual Column and this will be given a class of c1

Finally remember the WP Loop goes in the Column you want the content to display in, in this case it’s Column 1.

So looking back, what were basically saying is the 1 column container houses our single column with the WP Loop inside the column.

Because we have added the correct class to column 1 (c1) Thesis will automatically recognise this class as a column 1, so when you create your Column CSS package, you only need to add options to the first Column.

For our single Column package we will assign the class .columns-1

Then you can select your width, alignment and padding using the options tab.

I know it still says 2 columns in the drop down, this is because 1 column isn’t typically a standard, it is also because you don’t necessarily need to use a column CSS package for a single column, but it is recommended to do so, as it has to correct options necessary for selecting the width and alignment.

The full class for this single column would be: columns-1 > c1 if you decided to add any Custom CSS

Finally once you have finished, don’t forget to add your reference to the reference sheet. In this case it would be &1col

2 Column Layout

To save me from having to repeat all of the above I have super-imposed the HTML classes on the Boxes for you, the black writing is the name of the box, the red is the class.

Now remember what we did for columns 1, we can copy that information for our new package and alter the number 1.

to say number 2.

In the options tab, you would select 2 columns and set the widths appropriately.

The full classes for these columns would be:

  • columns-2 > c1
  • columns-2 > c2

if you decided to add any Custom CSS

Remember that if your main container, i.e. the one that contains the header, columns and footer and everything else has a fixed width then your column widths must be equal to or less than the width of the container.

Also don’t forget to float them left, or right.

And finally don’t forget to add it to your reference sheet, in this case for 2 columns it would be &2cols and your WP Loop goes inside the main column which should always be the top Column for optimal SEO.

Just to be clear, im talking about his container.

3 column Layout

The HTML structure

The CSS package Options

Remember to set your columns Options to 3 columns from the drop down tab and float left or right.

The full classes for these columns would be:

  • columns-3 > c1
  • columns-3 > c2
  • columns-3 > c3

if you decided to add any Custom CSS

Don’t forget your reference which in this case would be &3cols

4 Column Layout

The HTML structure.

The CSS package Options

Once again don’t forget to select 4 columns from the drop down menu in the Options tab, set your widths and float them left or right.

The full classes for these columns would be:

  • columns-4 > c1
  • columns-4 > c2
  • columns-4 > c3
  • columns-4 > c4

if you decided to add any Custom CSS

Don’t forget your reference which in this case would be &4cols

Final points about columns

In this tutorial I have used the class columns-?

? being the number.

You can change this to anything you like aslong as the columns inside the Column container are given the correct class of:

  • c1
  • c2
  • c3
  • c4

These cannot be change or specified for the default columns package and im sure any new boxes that use columns will stick to this simple logic.

Here is an example of 2 columns using my own custom class.

The HTML structure

The CSS package

I would then float my 2 columns left and give them there appropriate widths.

For this example the information here says:

  • Name – My Super Awesome Columns
  • Referencemy_super_awesome_columns
  • CSS Selector – .my-super-awesome-columns-2

In this case I would add &my_super_awesome_columns to my reference sheet.

The full class for custom CSS would be:

  • .my-super-awesome-columns-2 > c1
  • .my-super-awesome-columns-2 > c2

Just to make this clear, I would not use such long names for your classes, this is just to demonstrate that no matter what you call the container that the columns will live in, the columns themselves must have the classes:

  • c1
  • c2
  • c3
  • c4

I hope this tutorial has answer all your questions in regards to columns and how to create them.

Now it’s up to you to make it a reality.

Stay tuned for more Thesis 2.0 tutorials. There is much more to come.
Don’t have Thesis check it out here

Meet the Author

Matthew Horne

Matthew Horne is web developer who specializes in optimized development. He also builds custom solutions instead of reverting to plugins. Matthew Has a strong understanding of PHP, JavaScript, jQuery.

35 comments… add one
  • Aernout Oct 14, 2012, 8:08 am

    Great one again!

  • Tom Nunamaker Oct 14, 2012, 8:39 am

    Very nice write up! I’d like to see one on query boxes when you get a chance! For instance, adding a box with teasers in it 🙂

    • Matthew Horne Oct 14, 2012, 12:08 pm

      Thanks, Query boxes will be coming after the Update as there is a slight issue with them at this time, I have had the chance to play around with the fixed ones and I can say you will find them super usefull. Once the update is public the post will be made public also. Regards

  • Brandon Collins Oct 14, 2012, 11:26 pm

    Dude, these articles are a god-send.

  • Alan Oct 15, 2012, 8:54 pm

    Thanks a lot Matthew
    Re: 1 column layout screenshots
    What’s the “page” box and what’s it for please ?

  • capson Oct 17, 2012, 3:05 pm

    Many thanks, this cleared up some confusion I had.

    • Matthew Horne Oct 17, 2012, 3:13 pm

      No problem, that is the hope of the whole series, even if some of it seems obvous to some, it may not be for others. So hopefully with this series, each post will tell you something you were not sure of or didnt know about. 🙂

  • gray Oct 19, 2012, 10:58 am

    hi , i am new in thesis
    i just want to know how to add teaser or display post in teaser ,
    i did this in 1.8 but couldn’t find way to do in thesis 2.0
    any help much appreaciated

    and could you just give us short tut how to make skin in 2.0 with touch of style
    thanks

    • Matthew Horne Oct 19, 2012, 11:27 am

      Can you link an example of the tpye of teaser you would like to use. Thesis 2.0 doesn’t have teasers in the same way as before. But if you link me an example I will be able to write about it for you. 🙂

      • grey Oct 21, 2012, 8:09 am

        hey thanks for reply
        here is an ex of what im looking for
        http://www.pearsonified.com/
        i try to used tag but things doesnt work as i thought

        • Matthew Horne Oct 21, 2012, 10:36 am

          To use the more tag, you need to display full content, not an excerpt, then when writing your post you can press alt + shift + t to add a more tag via keyboard shortcode.

  • Philippe Oct 19, 2012, 5:33 pm

    Now just to make sure. I have many columns sets in one page:

    ie: set of 3 columns in header and set of 4 columns in footer and maybe a set of 2 columns in the main content area. Will I have to still call them c1, c2, c3, c4 in each set?

    • Matthew Horne Oct 20, 2012, 11:52 am

      Yes, Thesis 2.0 looks for c1 – c4 as the class for a column, but you can call the main class whatever you like, so for example, the container with the columns in could be called.

      My Columns with a class of my_columns

      Then the containers for each columns will have to have c1 – c4 as there class.

      The results is

      .my_columns .c1 { some stlying }

      • philippe Oct 21, 2012, 5:32 pm

        Thank you very much. I know understand why the c1-c4 need to be around everywhere.

        keep those tutorial coming. You really help a lot.

        Philippe

  • Shoeb Oct 20, 2012, 5:44 pm

    Still a long way to go in order to make it user friendly

  • JoeTaxpayer Oct 23, 2012, 11:36 pm

    Any thoughts to put up a skin for the 4 col pages?

    A simple header space, 4 col, simple footer? I can create the 4 col Package, but then it doesn’t contain the columns once loaded. Seems part of the solution is for tutorials to offer skins containing the examples?

    • Matthew Horne Oct 23, 2012, 11:40 pm

      That is certainly true and once the Update comes out thats exactly what you will see, because the update introduces the ability to import export skins, so these will be made available after the update, I will be creating various layouts for people to download and import to thesis 2.0.

      • JoeTaxpayer Oct 24, 2012, 3:40 pm

        Understood. If you wish to tinker with skin exports, there’s a fix even I was able to handle.
        thesis>lib>core>skins.php
        About 75% down is a line (apply_filters(‘thesis_allow_generate_distributable’, false)
        Changing to ‘true’ makes export button show in skin while in development mode.

        Given my situation, I’ve been using this to replace the skins I break, but am able to save any changes that look good.

        • Matthew Horne Oct 24, 2012, 3:49 pm

          Yes that is true, but it was disabled for a reason, it will however be available in the update which will hopefully be soon as I have some projects to complete that require the query box. I have messed around with the update and I can say that as far as I can tell from testing the update fixes all the issues.

  • Puneet Sahalot Oct 25, 2012, 10:22 am

    Very well explained! I have seen many people asking about a one-column layout and why there wasn’t any direct option to do that.
    Initially, I thought I could do with a “Single Element Package” instead of using “Columns”. But, I get it when you say “…but it is recommended to do so, as it has to correct options necessary for selecting the width and alignment.”

  • Jim Bowen Nov 6, 2012, 9:14 pm

    Like Thesis 1, are we limited to a maximum width of 934px?

    • Matthew Horne Nov 6, 2012, 9:16 pm

      No you can set the width to whatever you want it to be and Thesis 1.x was no different. You were always able to set the width to what you want it to be.

  • dabl Nov 11, 2012, 8:51 am

    Is it possible to construct a 3column header and have the rest of the site consisting of only 1 column?
    Thanks
    Dan

    • Matthew Horne Nov 11, 2012, 12:40 pm

      Yes that is possible, you can place columns everywhere, the header, footer or in the content area.

      • Daniel Phelan Nov 12, 2012, 12:57 am

        Thanks Matthew. I’ve now constructed a 3 column header, but not sure how to style the separate columns. Any suggestions?
        Thanks
        Dan

        • Matthew Horne Nov 12, 2012, 9:21 pm

          You can style it like so columns-3 .c1 columns-3 being the main container for the columns and .c1 is the column to style so you can style them like that. You will need to use the css classes you used on your columns though, hope this helps.

  • chessca Nov 15, 2012, 2:48 am

    Hello Matthew,

    Thanks. I appreciated your tutorial.

    There are four core templates namely home, single, page, and archive. I have applied a four columns-footer in home template. But when I click each post, I didn’t see a four column footer, why is that so? How could I implement this with other templates? I am confused now. Your help is much appreciated.

    • Matthew Horne Nov 15, 2012, 11:16 am

      You would need to apply the same column layout to the single template. Where it says home in the top left of the HTML editor click on home and a menu will appear to change templates for editing.

  • Washington Junior Mar 12, 2013, 8:44 pm

    Wow this is one awesome tut, I have looked around and no tutorial beats this one thanks a lot for the valuable information.

  • Ryan Dec 3, 2013, 7:13 pm

    Thanks for the tutorial… sooo much more difficult to change column sizes in the updated thesis, was getting pretty frustrated with this.

    • Matthew Horne Dec 4, 2013, 5:26 am

      Hi Once more skins get pushed out it will be much simpler as the Skin Options API is beginning to be adopted by almost all skin developers. I am currently creating a skin that will have a 1,2 and 3 column layout as well as other options for design purposes.

  • Friendship SMS Mar 16, 2014, 9:47 am

    as usually awesome information !! thanks for sharing this 1!

Leave a Comment