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.
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.
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.