The next thing we’re going to do is map out our child theme footer and we’re going to do that by coming back over and taking a look at this site here. The footer for this child theme has 6 widget areas. This is widget area 1, 2, 3, 4, 5 and 6. It’s got one row with 4 widget areas and a 2nd row with 2 widget areas.
This copyright is just a text widget and that’s a menu widget inside of this widget area. A person could have contact information or something else down here instead of the menu. It doesn’t have to be a menu here, iIt could be anything else that you can put there as well. But nevertheless, that’s what’s happening here, one row of 4 widgets and one row of 2 widgets making up the footer. So far, we haven’t really talked about how this becomes responsive but this is a place in which we need to talk about that.
Responsive Starter Template Widget Areas
First, if this were that new responsive starter template thing that came out this week, what would happen is as soon as this shrunk down, each of these widget areas would become a single widget area tall. You would have article categories that would span all the way across in the recent posts then subscribe, contact us, this menu and copyright. Each of those things would stack.
How We Are Organizing Widget Areas Responsive Behavior
What we’re doing here is we are allowing these to shrink and we are allowing it to stack in groups. What we’re doing is rather than each of these going to individual widgets to span all the way across, we’re letting these things stay as two widget areas side by side until it’s not possible anymore. At which point, it goes down to a single column of widgets but as long as it’s possible to have 2 columns of widgets here, we’re going to do that.
You can see the behavior here is first, it goes to 4 with these things separated then it comes down to 2 and when it’s at 2, we have these ones are no longer side by side. Now these are stacked on top of each other but these ones are side by side. As it comes down further and further, they stop being side by side and now they are just stacked.
How Widget Areas Shrink and Stack
There’s additional HTML necessary in order to make this work. Essentially, what’s happening here is first, these things shrink until they get to a minimum size then they stack. They stack with two widgets on top of two widgets or two rows of two widgets and they continue to shrink. When that doesn’t work anymore, they stack as 4 rows of one widget.
In order to make that work we have to wrap these two widget areas in a single wrapping div and these two widget areas in a single wrapping div in order to allow them to stack in pairs. If we take a look at this for a second, here you can see that we have our div id footer which is what’s created by Thesis. Inside of that, we’ve added a wrapping div footer left, a wrapping div footer right and another wrapping div footer bottom.
Footer left has 2 widget columns in it. Footer right has 2 widget columns in it and footer bottom has 2 widget columns in it. One of them is the left and one of them is the right. This is the HTML structure that we’re going to create in order to allow these to shrink and collapse. It’s certainly simpler just to make it all collapse so it shrinks to a certain minimum point and everything stacks from that point on but I don’t think it’s as elegant so we’re going to do what I think is more elegant in this case.