Build Your Own Business Website header image

What’s New in Thesis 2.0 Part 4 – Create a 4 Column “Fat Footer”

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - , , ,

Applies to -

In this session we show how to create a 4 column widgetized footer or what is known as a “Fat Footer” in Thesis 2.0. No coding is necessary in this new system. We create 4 Container boxes for the columns and 4 corresponding Widgets boxes to place inside the columns. Then we set up a columns package, discuss the class system and add our styling. We add the reference for the styling to the Skin CSS and review how the Save and Compile CSS system works. We finish by showing how to change all the templates being used so that the footer is styled the same way in all the templates.

The next thing we’re going to do is create a 4-column widgetized footer in Thesis 2.0. This is going to blow your mind. We’re going to create a 4-column widgetized footer and we are not going to write any code to do that.

Create HTML Boxes

We’re going to start off here with our footer and do something very similar to what we did before. We’re going to add a box and that box is going to be a container. And that new container is going to be called footer widgets. Because it’s going to be a set of columns, it’s going to have an HTML class similar to the other one. So I’m going to say columns_44. Again, using that same notation, the page is divided up into 4 pieces and there are 4 columns so obviously, each column is going to be the same size. So footer widgets columns 44 and hit close and shift drag up into place.

Column Boxes and Class

Now I need to put columns in here actually. So I’m going to create a container…footer column 1, add that box. Footer column 1 needs to have a class of C1. The way this columns thing works is that when you set up a columns package, it automatically creates those classes for each column based on the number C1 through C4. So since this is the first column, we’re going to give an HTML class of C1. We’ll add another box, footer column 2, add the box. Add another box, footer column 3 and then add another box, footer column 4.

Let’s just change those classes. So this class is C4 for column 4. This class is C3. This class is C2 and C1 was already done. So now I’m going to shift drag columns 1-4 into footer widgets. And then I’m going to remove this wp-admin link. And so I will shift drag it up here and drop it so it’s no longer there. And now we have our footer widgets with 4 columns.

Now we’re going to do something cool. And somebody noticed that I put an S in here. It doesn’t matter. In this case, this is just a name so I can recognize it. It doesn’t have any relationship to anything else so I could misspell this stuff to my heart’s content. I cannot misspell this though.

Add Widget Boxes

Next we’re going to add a whole new kind of box and that kind of box is called a widgets box. And the widget box name is going to be footer 1, add the box. Let’s see, another widget, footer 2, add the box, footer 3, add the box, and footer 4 add the box. Now we’ll just open up these things here for a moment and we’re going to give them the HTML class of widget because there’s a style in there that I want to use that’s called widget. So we’ll just do that for everything here. And you can choose which tag is associated with the title of every widget. I’m just going to leave it as a default of 4 which I think is fine in this case.

Now I’m going to drag these into place. So shift drag again, footer 4 into column 4, footer 3 into column 3, footer 2 into column 2, footer 1 into column 1. Come up here and save our template.

Create CSS

Let’s go over and create our CSS really quickly. Let’s look at our widgets. Oh yeah, that CSS selector was .widget so that’s the one we’ll continue to use. So now we’re going to add a new package and again, it’s a columns package and we’re going to call that footer columns. And the reference, remember, was columns 44. That’s actually going to be the CSS selector also, columns 44. We’re going to save that.

Come over to our options and say 4 columns. Column 1 is going to be 25%. You can use any measurement you want here. You could use pixels, ems, percents, picas. You can even use inches as ridiculous as that is. We’re going to float that one left. In terms of padding, I’m going to give right and left padding of 11 pixels in each case. Column 2 will be 25% and float left with left padding and right padding. Column 3, 25% with float left and 11 and column 4 at 25%. We’ll float that one right and 11 and 11.

Review the Changes

We’ll hit save and compile and come over and look at our page. And we have 4 widget areas, all stacked on top of each other which means, what? It means I didn’t add the reference for columns 44 to this list to be compiled. So that’s the last thing we have to do here, columns 44.

See, this allows you to have styles that you don’t actually want to delete but that you also don’t want to compile. So you can have styles over here that you’ve gotten from other places or that you used once upon a time but you’re not using at the moment. And you don’t have to actually delete them and you also don’t have to compile them. You can simply let them sit over here and the only things that are going to compile are ones with their references listed here.

So save and compile the CSS, refresh this. Let’s see, columns 44. Let’s just make sure I’ve got this right because it’s not right yet. Footer widgets, columns 44. That looks right, doesn’t it? So let’s save the template, let’s come back over. No dot in HTML, somebody tells me. That’s right. Thank you so much, Jim. I make this mistake. See, it’s asking me for the class so I don’t need to have a little selector symbol because it’s the class. So what it thought was the class name was .columns 44 which of course, is a syntax error.

Save the template again, come back over and refresh and we’re almost there. Pardon me, I put footer 2, footer widget 2 in column 3. So we’ll shift drag up to column 2. You’ll also have to drag and drop right you know? It is just drag and drop but you have to drag and drop right. We’ll go ahead and save the template again, come back over and refresh it. And now we have our 4 widget areas.

Widgets Panel

Now you may not realize this but we’ll just flip back over to the admin and look at our widgets panel in Thesis 2.0 for a second. So Appearance and Widgets and now we have footer 1, footer 2, footer 3, and footer 4 created over there. Not a piece of code written and those things are there now.

I’m going to add recent categories to footer 2. I’m going to add news categories into footer 3. I’m going to add my contact us get in touch. And then to widget 1, I’m going to put this widget with a cool picture in it. And widget 2, I’m going to have my Google Map widget, come back over here and refresh this now. And there we have our 3 widget areas or 4 widget areas and widgets over here. If we come over to our blog page, obviously the widgets don’t fit in there anymore and we don’t have our widget areas at the bottom.

Change Home Page, Posts and Archive Page Templates

Okay so the way to do that is to change those templates. And let’s go back over to our skin editor. Let’s fix this issue in our homepage and our single posts page and in our archive pages. And we just go to our homepage and take our 2-column box and drag it over to container. Drag 2 columns down to under header. Shift drag column 1, up into column… 2 columns. Shift drag column 2 up into 2 columns. Move column 2 down and then shift drag 3 columns out of there. In our footer, we’ll remove the admin link and drag footer widgets and footer column 4, 3, 2, 1 and then widget area 4, 3, 2, 1. Save the template, come back over and look at our homepage and now we have it set up just like that.

So it’s that easy to change your templates in Thesis 2.0 and we’ll be doing a little bit more of that here as we go along.

9 Comments… add one
9 comments… add one
  • terje karlsen November 17, 2012, 3:11 am

    Hi, first let me thank you for all your good info on thesis 2!!

    I have now uploaded your Full Width Thesis Classic 2 column layout with the content column on the left, and are trying to make this fat footer. I followed your instructions as I did a week agou(then with the classic skin). This time the styling of the footer is not working. Can you have quick look at user: test password: thesis and see if my reference is wrong? ( I am not an css expert:)

    All help wpuld be appreciated.


    • Rick Anderson November 17, 2012, 5:10 am

      Terje I tried to visit the site, but it was in Maintenance mode. However it probably comes down to one of 4 things:

      1. Missing Columns package
      2. The Columns package selector doesn’t match the class or id chosen for the column HTML Container
      3. The individual columns selector doesn’t match the class chosen for the individual column HTML Container
      4. Missing Reference in the Skin CSS compile list
  • terje karlsen November 18, 2012, 6:27 am

    Thanks Rick! Ill check out those suggestions and see if I can find the error. Thanks again for our response.! THis site rocks!

  • sandy December 19, 2012, 5:46 pm

    I’ve been working thru the free tutorials… they’re great… easy to understand in a simple step by step format. Thanks. Here’s my problem. I created the fat footer, but got some other stuff I didn’t want. In the body, I got a text box, named text box 1 and a widget box, named Widget 1. These two additions are paying no attention to the columns I created and just seem to go right thru them, spanning both of them. I didn’t knowingly create these and now don’t know how to get rid of them. Please help!

    • Rick Anderson December 23, 2012, 9:42 am

      Sandy – I’d need a link to the site to help you troubleshoot this. However, you can remove anything from the template by dragging it from the template and dropping it into the sidebar on the right. You might benefit from watching the series “The Beginner’s guide to the Thesis Skin Editor“.

  • Jennyfer January 22, 2013, 9:49 am

    Thanks a million for all of your tutorials Rick! I love the potential Thesis have but this version was so much harder for me to figure out. I just don’t know what I would’ve done without your guidance.

    My question is, how could I add texture to my fat footer. I don’t want it to be plain…. I would like to maybe add a nice background. How do I do that on ?Oh by the way.. the footer color is going to be different from the regular background… thanks

    • Rick Anderson January 22, 2013, 9:55 am

      Jennyfer – I’m glad you’ve found it useful. You should probably add a page width container inside of your footer (if you want the footer to span the full width of the screen) or put the footer back inside the container.

      Probably the easiest way to style the footer background separately is to use my Full Width Framework version of Thesis Classic. It has a #footer_area that you can add a background image to and then the #footer itself can be given a background color. You can find those free skin modifications here.

  • Ruby August 23, 2013, 1:56 pm

    Thanks for this great tutorial! I was able to get the footer working perfectly with the 4 columns. Then I tried this on the header as well because I want two columns in my header (65% and 35%). I set everything up in the same manner as the footer widgets, but for some reason they won’t display as columns. They are just stacked on top of each other. Any ideas about what’s going wrong here? I could send you log-in credentials in a private email if you give me an email address and wouldn’t mind taking a look. I’d really appreciate it.

    • Rick Anderson August 25, 2013, 6:16 am

      Ruby, I wouldn’t need login credentials but I would need a link to the site so I can see what is happening.

Leave a Comment