Build Your Own Business Website header image

One Hour Website Makeover DJ Sean Denard Part 4 – Setting Up the Widget Areas

Whoops, you've found some premium content!

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

This is Part 4 of the One hour website makeover for DJ Sean Denard’s site and in this session we show how to set up the widget areas using BYOB Thesis Header Widgets and BYOB Thesis Shortcode Content Widgets plugins.

Video Transcript

And so we’ll go back to the dashboard and take a look at the plugins that I’ve installed. Actually, there are a couple of plugins that I’ve installed that not have not yet been activated so let’s go ahead and activate all the plugins. So install the plugins and we’re going to active the Thesis Footer Widgets plugin. You have the Thesis Feature Box plugin, the Thesis Footer Widgets plugin, the Thesis Full Width Backgrounds plugin which I’ve been playing with a bit the last couple of weeks. We have this new plugin called the Thesis Header Horizontal Layout plugin which we’ll talk about extensively today. We’re going to activate that. We also have the Thesis Landing Page plugin which is what I use primarily to eliminate the page titles from the home page. We’re going to use the Thesis Shortcode Content Widgets plugin which I introduced yesterday. We’re going to use the Thesis WP Menus plugin and we’ll be using the Dynamic Content Gallery. I think that pretty much has everything that we need.

And so we’ll use the Header Horizontal Layout plugin to create this header area. We’ll use the WP Nav Menus to add the menus. This is going to be the Dynamic Content Gallery. Each of these widget areas will be created using the Shortcode Content Widgets plugin and the footer area’s going to be created using the footer plugin. And then all these background colors and everything will be created using the background… the Full Width Background plugin.

So we have those plugins all installed and the first thing we want to do is set up the number of widgets that we’re going to be using. If you look here, what I… the way my new plugin is set up is that…. that is the horizontal… the Header Horizontal plugin is set up is it allows you to created up to 3 horizontal widget areas. And so in this case, that’s 1… can’t draw… and then the 2nd one and then the 3rd one. So you’ve got 1, 2, 3 layers and that’s why it’s called horizontal because the widget areas are laid out horizontally. I have a plan in the future to create a vertical one so that the widget areas can be laid out vertically instead.

And then each one of these horizontal areas can have up to 3 widget columns in them. So I could have a widget column here like this and like this and so you’d have 1 widget area, 2 widget areas, 3 widget areas. As it is, this is going to be one big… this is going to be one widget area and this is going to be one widget area. And then this is going to be 2 widget areas. So in my header, I will have created 1, 2, 3, 4 widget areas to create this header and this going to be row 1, column 1, row 2, column 2, row 3, column 1 and row 3, column 2. That’s how these things are going to be laid out.

And then let’s see, switch back to my non drawing mode here for a second and then when we come down here to this as we saw yesterday, this is 3 different widget areas and these are the Shortcode Content Widget areas. So we’ll create 3 of those and then the footer is going to have 2 widget areas. It has the one row and then it will have 2 widget areas. And so we’re going to create those first.

Now the reason why we’re creating them first is because what happens is that if you create widget areas and then add more widget areas, the stuff that you put in the original widget areas can get jumbled around. So it’s always easy just to start off you know, with what you’re going to use. And if you end up making changes to it, you just have to recognize that when you make those changes, you will… you may have to go back and reshuffle widgets in and around your widget areas because the widgets may have stayed in the same place but the widget areas have moved or vice versa. So we’re going to start off recognizing that that’s a potential problem. We’re going to start off by configuring our widget areas.

And if we come over here and look at this right now, actually, I’m going to show you an example of that so you can see what I’m talking about. Under Appearance and Widgets, right now I’ve got 3 widget areas: footer row 1, widget column 1, header row 1, widget column 1 and widget block 1 widget column 1. Now, I am going to insert a text widget… actually you know, I think I’m just going to insert a categories widget in header row 1. Okay and now, I’m going to add my footer rows and you’re going to see that this little widget is going to move because… well, it’s just going to move.

So we’ll come back over to our Footer Widgets plugin then and we’ll configure… we’re going to have one footer widget row. We do have a developer’s license so we’ll go ahead and select that. And then our footer widget columns, we will have 2 widget areas. Remember, that’s what we showed at the bottom. And so now, we’ll go ahead and hit save and come back over to our widgets. You’ll see that it’s added the additional sidebars so now we’ve got footer row 1, widget column 1 and widget column 2. And this no longer has a categories in it. The categories now moved up into this position. So that’s why it’s important to get these things laid out first and when we don’t get them laid out the way we want them before we start filling them in, you just know what you have to go back and check to make sure everything turned out the way you want it to turn out. And that just generally means just shuffling widgets around. If you feel like you’ve lost a widget, when you eliminate a sidebar that has a widget, that widget usually comes over here into inactive widget. So generally speaking, a widget that you might have lost, you’ll be able to find over here in inactive widgets.

Okay so that was the footer. Now let’s do the header. Now this is… I’ve never introduced this plugin to you yet and so I’m going to start that now. What this does is this creates rows of widgets. And so the first thing that you define is how many rows of widgets do you want to use? And so as I said before, we’re going to use 3 rows of header widgets so we’ll go ahead and hit save to that. Once I’ve done that, that creates a little layout here thing showing you the layout of the header. So right now, we have 3 header widgets stacked on top of each other and in fact, if we come over and look at the site… oh I don’t… yeah, let’s just refresh this. Oh, it’s all jumbled around. That’s right.

Let’s see, I also haven’t… that’s the other thing I have to do is once we have specified the rows, we also have to specify the number of widget areas. So we have 3 widget area rows specified. Now, we’re going to specify the widget columns. And so we’re going to have 1 widget column and header row 1. We’re going to have 1 widget column and header row 2 and we’re going to have 2 widget columns and header row 3. Hit save and now you can see how this thing it laid out and we’re going to have our little message at the top that is the DJ Entertainment Serving the Seattle Area. That’s going to go up at the top then the banner, the main banner is going to go in the middle and then the phone number and the check my availability will go on the… the phone number will go here and the check my availability will go here. Okay so we’ll go ahead and hit save and now we can see this layout starting to take shape here. There’s the 1st widget area, here’s the 2nd, 3rd and 4th, okay?

So now the next thing or the final thing to do in terms of setting up those widgets is setting up this Shortcode Content Widgets which I introduced yesterday. The Shortcode Content Widgets does something very similar to the header widgets and that is instead of calling them rows, what I do is I call them blocks. And so we’re going to create one widget block… actually, we’re going to create 2 widget blocks but we’re only going to use one in this process. So we’ve got 2 widget blocks we’re going to create and we hit save. See this gives us a layout for each of those 2 widget blocks. And then the widget block that we’re going to be configuring for the homepage is going to have 3 columns. So it says, how many widget columns? We’re going to say 3 and hit save. And now, you can see that widget block 1 layout’s going to have 1, 2, 3, columns in it. Widget block 2 layout is configured currently to only have 1 column in it.

So if we go back over to our widgets here for just a second, you’re going to see that we have now a whole bunch of more sidebars or widget areas. So we’ve got our footer row 1 and 2 or footer row 1 columns 1 and 2. We’ve got our header row 1 column 1, header row 2 column 1, header row 3 column 1 and 2. And then we have our widget block 1 columns 1, 2, and 3 and then widget block 2 column 1. Okay so these are all the new sidebars that we’ve created using those plugins.

So let’s come back over and refresh this. Actually, I’m going to pull that categories thing out of there. Yeah, right here, footer rows. Lose the categories. Okay so that’s where we are starting at, right here.

0 Comments… add one
0 comments… add one

Leave a Comment