Build Your Own Business Website header image

Thesis 2.1 Launch Party – Part 9 – Create a Widgetized Footer with the BYOB Simple Thesis Classic Responsive Footer Widgets Box

Whoops, you've found some protected content!

Watch the opening clip of this video to preview it,
the full video is available to free and paid members.

The next thing we’re going to do to customize the Thesis Classic Responsive skin is add a widgetized fat footer to this. Now, in times past, what you would have to do is either write your own code or read somebody else’s tutorial and copy and paste a bunch of code. In Thesis 2.0 you had to use the Skin Editor. Well, you’re not going to have to do that anymore because I’ve created a tool for you and this tool is free to everybody.

Simple Footer Widgets for Thesis Classic Responsive Skin

If we come back over to my site and go to the Member Benefits section, the first item in the menu is Thesis 2.1 Boxes and the very first one in fact, today the only one, is the Simple Footer Widgets for Thesis Classic Responsive Skin. So you click on that and all you have to do is download it.

How to Install, Activate and Update a Box

This is a box, it’s not a plugin so you can’t install it as a plugin. You have to install it as a box and there are instructions over here about that. But what we’re going to do is come on over here to Boxes and Manage Boxes and then we’re going to choose Upload Box. We’ll choose the file and I’ve got to go to the download location, okay, that’s the name of the box. Open it up, add the box.

We’ve added the box and you can see it’s right down here now. I’m going to check it and then hit Save Boxes. By checking this box and saving it, it activates the box.

All of my boxes have automatic updates to them. You can see this box here is saying that it has an automatic update and when there’s an automatic update, it gives you the update thing here. I’m going to demonstrate that updating for you while we’re here.

Set Up the Number of Widgets to Show

So the BYOB Simple Footer Widgets for Thesis Classic Responsive Skin is activated and once that’s done, you see this footer widgets menu item here under boxes. That’s what this does, this creates a menu item under boxes called footer widgets. If you click on that, it gives you the opportunity to determine how many widgets you want to show, you can show 1, 2, 3 or 4.

I’m going to show 4 and hit Save the BYOB Footer Widgets for Thesis Classic Responsive. Now unfortunately, you actually have to save it twice because this right now, if you refresh it, actually it worked the second time. Sometimes what it will do is show all of the footer widgets but they won’t be sitting side by side because the CSS didn’t get properly generated so if that’s the case, just save it twice. If you save it twice, it definitely works. It’s a little oddness and I’m guessing that you may have to live with this oddness for a little while.

Add Widgets to the Footer Widget Areas

Once you’ve done that, you can come over to your Appearance and Widgets and you’ll see now that you’ve got Footer Widget 1, Footer Widget 2, Footer Widget 3 and Footer Widget 4 or you can place widgets. So for the time being, I’m going to place some widgets in there.

I’m going to take the Get in Touch widget and I’m going to place it in Widget 4. Actually, I’m going to take the Our Location widget and put it up in the main sidebar. We don’t have that yet there either, I forgot about that. Our Location, this is actually the Google map of our location and then let’s see, we’ll put the Killer Recent Entries in Widget 3. We’ll put the News Categories in Widget 2 and we could even put the Meteor Slides widget for the time being in Widget 1.

Responsive Behavior of the Widgets

If we refresh it, now we have all 4 of our widgets showing up here. In fact, if we come over and refresh this in the Responsinator, you’ll see that the widgets are responsive too, that is they all stack one on top of the other the way you would expect them to.

When you have 4 of them, theoretically they stack side by side except that this category doesn’t have enough things and so this tries to sit beside it. If I rearrange those widgets and just put this widget first, so in the smaller view they stack on top of each other, in the wider view, they sit side by side before they stack on top of each other. It’s kind of I think a cool little thing and actually, there is an advanced option in this too.

Now, I’m not really talking at all about the Skin Editor today but for somebody watching the video on how to use this footer widgets option, if you come on over to the Skin Editor, you can actually decide not to display the footer widgets on any given template.

So if you go to the front page template, this box creates an option called Footer Widgets where you can choose to remove the Footer Widgets from the template.. Save the template and then come back over and look at the front page and you see the Footer Widgets aren’t there but they are on all the other pages.

So that’s an advanced option available to people who are working inside of the Skin Editor. However, I’m going to undo that for the time being. That’s the last time I’m going to mention the Skin Editor here today because the Skin Editor is not for a non-technical person, the Skin Editor is for somebody who wants to get their hands dirty playing with code.

0 Comments… add one
0 comments… add one

Leave a Comment