Build Your Own Business Website header image

Introduction to Creating Child Themes for Genesis 2.0 – Part 4 – Add Some Widgets to the Footer

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

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.

We’ve now added Genesis functionality to the child theme and the next thing I want to do is use one of the most frequently used Genesis tools and that is their footer widgets. Right now we don’t have any footer widgets and Genesis has this function.

Add Support for Footer Widgets

Let’s go back over to our example functions file and scroll down here to their little section on footer widgets. They’ve got this add_theme_support. We’ll just copy this again, come back into functions.php. There we go, we’re adding theme support for 3 column footer widgets and all it is just like above, add_theme_support but now we’re adding theme support for Genesis footer widgets.

Add Widgets to the Footer Area

Then we’re saying how many footer widgets we want, right? We could say 2 and this would only give us 2 footer widgets. Let’s save that and upload it and then come back over to our system. And actually, we don’t see anything because we need to add some widgets so let’s come over to our widgets panel, now you can see it’s got Footer 1 and Footer 2.

If we want 3 footer widgets we just change this to 3 or if we want 4 footer widgets we change it to 4 and so on and so forth. We’re just going to say 3 for the moment . We’ll hit save and then upload that. Refresh this and now we’ll have 3 footer widgets available to us.

Add Content to the Widgets

I think what I’m going to do real quickly then is just drag some content into these footer widgets so we can see them. I’ll take this Contact Us and add it to Footer Widget 1 and we’ll take a Featured Posts and we’ll add it to Footer Widget 2 and then we’ll take Categories and we’ll add it to Footer Widget 3 and then if we refresh this, now we’ve got 1, 2, 3 widgets showing up here.

Let’s go back to our Front Page and we’ve got 3 footer widgets. Actually, I don’t think I’m going to use that one, I’ll just pull this out of here and I think instead of that I’ll take another text widget, drop it in and finish it with some Lorem Ipsum text. Copy that and come back over to our widget, paste that. So now we have three widgets that are sitting there.

Add Responsiveness for Smart Devices

Note how all three of those widgets are laid out side by side and they’re equal width. It’s not obvious because this doesn’t have any content and this content is narrow but nevertheless there are 3 equally spaced widgets. And if we shrink it down, it becomes responsive. That’s the other thing that happens here, all of this stuff is automatically responsive. Actually, it seems like it’s automatically responsive here because Chrome is automatically responsive but in fact, it’s missing one thing.

Add Viewport Meta Tag

The thing that it’s missing is the call to a viewport meta tag in the head which is what this needs in order to be responsive on smart devices. In fact, I don’t even think it’s going to be responsive in Internet Explorer but let’s just see what happens. That is responsive in Internet Explorer so Internet Explorer doesn’t require that but nevertheless we still need this meta viewport tag which does not exist currently.

If you’re familiar with responsive design you know there’s a meta viewport tag in here that tells mobile devices what to do with pages or how to use the media queries essentially that are inherent in the CSS. So that’s the one last thing we’re going to add to this.

Again, we’re just going to borrow it from this functions file of the existing one and that is up here, add_theme_support there. So we come back over to our functions file and I think I’m going to put it directly below HTML5.

So add_theme_support for ‘genesis-responsive-viewport’ and with that, once we save it and upload it, you’ll see that we end up with the responsive viewport that will automatically make the site responsive.

Let’s refresh this now then come back and take a look at the head. Now inside the head we have this meta “viewport” tag which says, “width=device-width, initial-scale=1”. This is something you can customize if you wish. There’s a filter for customizing it but having said that, this is something that you’re going to need in order to make the child theme responsive in the context of an actual mobile device.

0 Comments… add one
0 comments… add one

Leave a Comment