Build Your Own Business Website header image

How to Add a Widgetized Feature Box to the Front Page Using the Thesis 2.3 Skin Editor

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

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.

Next you’ll learn how to add a widgetized Feature Box to the front page using the Thesis 2.3 Skin Editor. Essentially what that means is that we are going to put a two column feature box below the menu and above the content. Then we’ll put a slider in one side and an email optin form in the other.

Create a Responsive Two Column Feature Box

That starts off in the Skin Editor. Let’s go to the Front Page template. As you may or may not know, responsive design depends upon CSS constructs called Media Queries which change the CSS rules depending upon the width of the screen.

Use Existing Thesis HTML Structures for Responsiveness

That’s how responsive design works mostly these days and that’s how it works in Thesis. We want to make sure this new box is responsive. Rather than writing our own responsive code what we are going to do is use the existing Thesis HTML structures to create our own responsive section.

Let’s close up wp loop and then close up the column. The responsive structural arrangement in Thesis Classic Responsive starts with this container called columns and then another container called content and another container called sidebar.

It’s not their names that we are talking about, it’s the class that we are talking about. These have the class names columns, content and sidebar. So we are just going to recreate that structure using HTML boxes.

Add New Box for the Feature Box

Let’s come over here to Select a Box to Add and scroll down. Remember everything like this without asterisks are boxes that exist that could be placed on this template and everything with an asterisk is a box that can be created but doesn’t actually exist.

So we are going to create an HTML container and we are going to immediately name it. Please, this should be a rule for everybody. I know that beginners break this rule for a long time but if you are just learning how to do this don’t ever create a box without giving it a name.

Importance of Naming Your Boxes

If you keep it named HTML container you might have 20 of them in there all named the same thing and you won’t know which one is which.

We’re going to call this one Feature Box Columns. And we’ll give it an ID just so that we can target it more easily. ID is feature box and the class is the same as that other columns box so it will be columns.

Add Left Column

The next one we are going to do is the content one. We’ll come down here and create another HTML container. We’ll call that container Feature Box Left Column and we’ll give it a class of content. That’s the class it needs. This one here needs the class of sidebar

Add Right Column

We’ll create another one of those HTML containers. We’ll call it Feature Box Right Column. And we’ll give it a class of sidebar.

Then the way the page lays out, the first column is the left column and the second column or the bottom column is the right column. We’re going to lay those out just like this as well.

Move Columns Into Feature Box

So we’ll Shift+Drag the right column into Feature Box columns and the left column into it as well. You can see we’ve got them arranged correctly. And then we are just going to Shift+Drag that up into the Container.

Add Widgets to the Feature Box Columns

Come down just below the nav menu and we have created the 2 column Feature Box. The next thing to do is to place something in it. In this case we’re going to create a feature box widget for that.

Add Feature Box Widget Area

Come down here to Widgets and say Add New. We’ll call it Feature Box Widget Area. Let’s take a look and see what Chris did with his sidebar. He’s got his sidebar widgets and he didn’t give it a class. He didn’t do anything but give it a p tag so we’re going to follow that.

We’re going to Shift+Drag that and put it into the left column. We’re not going to put anything in the right column at the moment. We’ll put the optin form in the right column in a few minutes but at the moment we don’t have it installed so we can’t put it in there yet.

Let’s come back over here and hit Save Template. Now when we view the page you can see we’ve got the widget box and this column is empty.

Add a Text Box to the Feature Box Widget Area

Let’s jump over to Appearance and Widgets. You can see we’ve got our Feature Box Widget Area right here. I’m going to use a text box in there. I’m not going to put a title in.

Add Shortcode for Slider to Text Box

I’m going to put a shortcode in here for a slider. I don’t remember the shortcode so I’m going to go over to my slider and get the shortcode. This is it, copy that and drop it in there and hit save.

Let’s reload the page and take a look. There it is. Now we have our slider showing up in the Feature Box and the next thing to do is to add the optin box.

Why You Should Update Everything On Your Website

There’s a notice that there’s an update so let’s take a look at that first. It’s an update for Effectus so we’ll ahead and update that. There’s never any good reason not to keep your stuff updated and it’s critical that you update everything you have even if you are not using it.

If there are security vulnerabilities that exist in a plugin, theme, skin or box those vulnerabilities can be exploited whether or not you are using them. You always want to keep everything up to date.

0 Comments… add one
0 comments… add one

Leave a Comment