Build Your Own Business Website header image

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.

Lesson 12 – Part 5 – Example #2 – Create a “Fat Footer” with 3 Widget Columns

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

Applies to -

Example number 2 of creating custom sidebars in the Thesis theme will be to create the fat footer with 3 widget columns. I believe this is a better way of doing it than as described in the manual, no offense to Girlie or whoever wrote that but that example doesn’t provide with the opportunity to clearly identify what the sidebar is for and doesn’t provide you with unique IDs for those sidebars that don’t change when other sidebars get added and I just don’t think it represents best practice although it does certainly represent a simple way of doing it.  We’re going to do that by copying this.

Define the Widget Areas

The first thing to do is again to register our sidebars so we’re just going to copy this one here. Inside that same function, register_sidebar and this is going to be not Feature Box Widgets but Footer Left Widgets then this is going to say footer_left and ‘This is the leftmost widget area in your footer’. We’re going to get rid of class here and otherwise this is going to say the same so we’ll do that 2 more times. This is going to be Footer Middle and Footer Right, footer_middle, footer_right, then Rightmost and Middle so leftmost widget area, middle widget area, rightmost widget area. Now we’ve got all three of those widget areas defined.

The next thing to do is essentially the same thing as this although we are going to innovate on this a bit but we’ll start off by copying it. This is going to be byob_fat_footer_sidebars. Now because we are doing these 3 columns side by side, we want to create a wrapping div for the entire thing that wraps around all 3 of those columns. We’re also going to need to create another wrapper that we can apply CSS styles to.

In this case, what we’re going to do is first let’s go back to sidebar and div. Right inside of sidebar, I want to create another wrapper, div. I want to explain to you what this does once we start doing the CSS styling so div and closing div tag. Then we’re going to do a big wrapping div, div id=”byob_footer_widgets” then the big closing div.

Here, we’re going to add another class to this and this is going to be byob_widget_column and this is our leftmost so we’re going to say left and sidebar so it’s byob_widget_column left sidebar. Then we want to change this up so were our left_footer_widget. Inside of div id=”byob_footer_widgets” , we’re going to have 3 columns here.

This one is not going to have a left or right because it’s the middle and this one is going to have a right class that allows us to do different things on the ends. We’re just going to grab our footer_middle_widgets and footer_right_widgets and the hook is thesis_hook_footer. Now we have this HTML structure, we’ve wrapped everything inside of div id=”footer_widgets” then we’ve got our widget_column_left, our widget-column_middle and our widget_column_right.

Clear the Floats

We need one other thing and that is something to clear our floats because we are going to be floating each one of these so we’re going to include what is called a clearing div. It’s going to be div style=”clear:both” and it’s not going to have anything in it, it’s just going to have the effect of clearing our floats so that nothing else tries to float up beside all of these. We have our overall wrapping div, we have our column wrapping div, we have our style wrapping and we have our sidebar. If we save this, upload it, come back over to our site and refresh it, we have 3 widget areas.

Now we need to add some custom CSS to make them float side by side so that they are three wide but we nevertheless have succeeded in creating them and sticking them in the right spot. If we come over and look at our widgets panel, we now have our Footer Left Widgets, Footer Middle Widgets and Footer Right Widgets.

Reducing the Amount of Code To Be Used

What we’re going to do next though before styling this, we’re not actually finished with this example because what we really want to do with this example is modularize our code. Notice how most of this code is the same as most of this code which is the same as most of this code which is the same as most of this code? Well, this is a perfectly an acceptable way to write it but it does mean that we end up needing to maintain a lot more code. We don’t need to maintain a lot more code, there’s lot more opportunity for error in this, more places for you to do typos and it’s more code for your server to have to store in its memory.

Rather than doing it this way, what we’re going to do is create a piece of code that we can reuse over and over again. I’m going to start that piece of code off here. I’m just going to take this and this is a piece of code we’re going to reuse. It’s not going to be feature_box_sidebar, it’s going to be byob_sidebar_html. We’re not going to wrap it with this, we’re going to get rid of this wrapping div so it’s just going to be the ul. Then what we’re going to do is look at the things in here that are variable and we’re going to turn them into variables.

Right here is something that wants to be variable and here is something that wants to be variable. That’s what we’re going to do, we’re just going to leave it. These are two variables so the first variable we’re going to use is $byob_sidebar_id, that’s the first variable we’re going to use. The second variable we’re going to use is label so what we’re going to do is take this sidebar_id variable and replace this with that variable and take this label and replace this with php echo and echo the label.

I think we’re going to do that here too. We’re going to concatenate that in there so we put our single quote, a space, a concatenation symbol, a space, the label variable, a space, another concatenation symbol, a space, a single quote to resume and we’re going to need a space after that. We’re going to take the label and put it here and here.

Call the Function

The way this works now is we’re going to call this function and going to pass that function a value for byob_sidebar_id and a value for label then we’re going to take those values out of the attributes of this function and use them in these 3 places. Which means that now what we can do is, we’ll start up here at the top and let’s just call this actually. We’ll come back up here and in this place, we’re going to say, php, call our function and the sidebar_id we’re going to replace with this feature_box_widgets so there’s our sidebar_id and this is going to be our $label.

We kept our ul, our div then inside that sidebar, we are calling our function byob_sidebar_html and we’re passing to that function this value which is the sidebar_id and this value which is the label. We’ve called this  function, we’ve placed the first value in that attribute list as sidebar_id and the second value as $label then we’ve taken byob_sidebar_id and place it here then $label and place it here.

Let’s go ahead and save this so we can see this in operation the first time. Our feature_box things still worked. Let’s take a look at oh that’s right because I didn’t change my titles there did I? But here we are in our feature_box and we got our div class of sidebar, ul sidebar_list and so on and so forth, exactly the way it’s supposed to look.

We’re going to do this exact same thing inside of our footer widgets so we’re going to take this right there and inside of wrapper, we’re going to call our function or give it our id and this is going to be not feature_box_widget_area but we’re going to call it footer_left_widget_area so we can delete all of these and we’re just going to do this again, footer_middle_widget_area, delete all of these code and one more time, call the right widgets and footer_right_widget_area then get rid of all of that code.

We’ve significantly reduce the amount of code that we needed in order to create these widget areas because we’re reusing this code over and over again and applying it to different places. Let’s go ahead and hit save, let’s upload and let’s see how it looks, footer_left_widget_area, footer_middle_widget_area, footer_right_widget area. Arbitrary feature box heading, we go to a place where we don’t have the feature box and it doesn’t show up.

Write CSS Code for the Footer Widget Column

Now, let’s write some CSS to make these things come together. What I’m going to do actually is write it in FireFox so we can see what it looks like as we work our way through it. This is where you’re going to see the benefit of those wrapping divs that I was talking about. We come down here and we inspect our element. We’ve got our footer_widgets, we still got our div id =”footer”, instead of div id=”footer” we’ve got our footer_widgets which is what we’ve created then we’ve got our footer widget columns so we’ve got the left, the middle, the right and our clearing div.

What we’re going to start off with is defining the stand alone condition which is the byob_widge_column. We might actually use byob_widget_column more than just here so we’re going to start off actually with div id=”footer_widgets” so there’s #byob_footer_widgets .byob_widget_column, we’re going to make them 33% of the width and we’re going to make them float:left. Notice how they all jump up like this? By default, Thesis makes all the text in the footer left aligned and that doesn’t really work for us very well.

Style Footer Widgets

What we’re going to do with this one is say, text-align:center; and that made everything centered. We’re going to style this slightly differently, widget_column.left and widget_column.right. Widget_column.left is going to have text-align:left, widget_column_right is going to have text-align:right.

This was why we added that class left to the left sidebar and right to the right sidebar so that we could do this kind of thing where we could have a class that defined everything generally so its width and its float could be defined by a single class but then we could drill down to that class and make it behave differently depending upon whether it had a left or the right assigned to it.

Now, here’s where this wrapping div thing comes in. Let’s just say we wanted to give ourselves a blue background behind each of these and give ourselves a bit of padding around them. If we came over here to our widget_column and we said, background-color:blue. Now we need to create our padding or our margin or whatever in order to separate these. If we come in here and add margins, it’s going to break it, margin:10px.

Specify Padding and Margin for the Wrapper

The reason it breaks it is because margin and padding are additive. We gave the width as 33% so as soon as we add margin, now this is 33% plus 10px of margin on each side which is obviously more than 100%. There’s not enough room for it to fit all 3 of them to fit so 33% plus 10px of margin no longer works. We don’t want to explicitly set the value in terms of pixels here because that has some problem sometimes as well so we want to leave this percentage as the divider but we still want to have margins in between them.

The way we handle that then is not to specify this for the widget_column but instead to specify this for the wrapper. Let’s take this one but instead of widget_column, we’re going to say wrapper and we’re going to take the background-color and margin out of that and put them here instead. What we’ve done now is we have taken this wrapper and because it is a div, it automatically takes up all the space available to it.

That’s the way a div works, is a block level element so it automatically takes up all of the space available to it so we don’t have to explicitly specify its width so we can go ahead and give it a margin and not have it break because it’s going to be as big as necessary plus as big as it can be after margins and padding because we haven’t given it an explicit width.

You might ask yourself why we didn’t do that to the ul, why do we need a wrapper div, why don’t we just do this to the ul instead. The  reason why you don’t do it to the ul instead is because a ul is not a block level div. A ul does not automatically expand to take up all of the available space. A ul only takes up as much space as it needs. Unless you explicitly specify its width or unless you give it a display of block, it’s not going to automatically be the full width of this widget area if it doesn’t need to be the full width of the widget area, it won’t be so it’s not a good choice for padding, margin and background color when you want to create something that looks like this.

That’s why we gave it a wrapping div there and you really need to do this in the context of columns of widgets, we didn’t do this in the feature_box_widget because we don’t have side by side columns so it wasn’t critical. When we have side by side columns of widgets, that’s when it becomes important to do so we’re going to take these styles now, copy them, come over to our custom.css and paste them, save it, upload our custom.css, come to the site and refresh it. Now we have our footer widgets which show up on every single page. We attach it to a footer and since the footer exists on every page, this is going to exist on every page. That’s example number 2.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment