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.

Part 5 – Create a Custom Template with a Widgetized Header in Genesis

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

Applies to -

The next thing we’re going to do in this Customize Genesis using Custom Templates tutorial is instead of hardcoding this header with an image, we’re going to widgetize it. Then people can put whatever image or whatever else they may want.

The way we’re going to do that is to remove this add_action for the time being and then we’re going to say function byob_widgetize_custom_header.

Register the Genesis Sidebar

You remember from the last time when we were doing this we had to register the sidebars. So we’re going to do that here in the byob-custom-functions.php file.

Let’s copy that genesis_register_sidebar and come down here. This is going to be ‘full-width-header’ because there already is that header widget registered and we’re going to say ‘Full Width Header Widget’. Then ‘This is the widget area in the header of the Custom Header Template’.

Insert the Genesis Sidebar

That is going to create the sidebar or the widget area for us but then we have to do the very same kind of thing that we did before which is we have to use this genesis_widget_area to insert the sidebar. We need to specify which one it is and then I give it some kind of before and after.

I’m just going to copy this little bit of code and paste it over here. This is the one we’re not really using, I don’t need that function. So this creates the Genesis widget area but it’s not the above-footer, it is the full-width-header and we need to be careful about the class name we give it because there is a class name for the header widget already.

Add a Different Class to the Header Area

Let’s come back over to the Home page for a second and look at this widget area, there is a class here, “widget-area header-widget-area” and if you look at this it says, .site-header .widget-area and it gives you the width of the header area. So we’re probably better off not using the same class name.

The way the HTML works is .site-header is automatically added, so instead of “widget-area” we’re going to add a different class. We’re not going to call it an aside since it’s inside the header so we’re just going to give it a different class, it’s not going to be called “widget-area”.

We’re going to say again, “full-width-header” as the class. We won’t use “widget-area” and we won’t use the other class name either. So here it’s saying we’re going to use the ‘full-width-header’ widget and then we’re going to wrap it in these things.

Upload the Files, Review and Make Changes

Let’s hit save to this and save to this because it’s not going to work without that widget. Come over and upload our custom-header-template and then we also have to upload our byob-custom-functions.php file. With both of those uploaded, now it’s empty because we haven’t put anything in that widget.

Let’s look at the header. We’ve got a div class=”wrap” before and after and nothing is there and they’re actually the real reason nothing is there is because we didn’t add the action to the right spot.

So we’ve got our custom header here but we haven’t added it to anything. Let’s copy that, add_action(‘genesis_header’) and then this is the function we’re adding to it. There, ‘byob_ widgetize_custom_header’. You don’t really see anything here because we haven’t put a widget in it.

Add a Custom URL to the Header Widget

Let’s come over to Appearance and Widgets and now there’s our Header Right, here’s our Full Width Header Widget. What I’m going to do is take a visual editor, add it in there, add media, upload files, select the file and then we’re going to link it to a custom URL. That custom URL is, of course, our Home and it’s going to be full size.

Let’s insert it into the post, save it and reload it. Oh, I didn’t upload the change, my-templates, custom-header-template.php. There we have that now. When we inspect the element, you can see that we have our div class=”full-width-header” but we have this class of “widget” that’s automatically adding that large margin.

Remove Styling in Widget Area

So what we can do is get rid of this class of “widget” in a way similar to what we did when we were creating that front page content area. Here you see that, before_widget and after_widget. Let’s copy that code and we can add that to our definition.

Come down here to our definition in genesis_register_sidebar. It’s not going to be an article, we’ll go ahead and say div. You know, I don’t really think we need anything in here, in this case. We don’t really need to add styling to this div so we’re just going to say div and that should give us a nice empty widget area there. Devoid of the typical class names that get added to a widget area.

Let’s go back over to here to FileZilla, byob-custom-functions.php and reload this. Let’s inspect the element and now we no longer have that class “widget” that adds extra margin and the only thing we have now is this text widget adding a paragraph tag. So instead of the visual text widget which adds that paragraph tag, we could just copy this, take it out, go grab a text widget, drop that back in, drop in just the h tag and don’t check “Automatically add paragraphs”.

Now we don’t have anything that’s automatically getting some kind of padding to it, that’s essentially what we just did. We made sure there was no padding. Well, actually we still end up with margin-bottom for align:none but we’re in control of that.

We could actually take the class out entirely here so that it’s fully free of built-in styles and it’s just a straight image which is what we want. There we have it. There’s our image, it’s inside of a text widget but it’s inside of this full-width-header here.

Create the Widget Header Template

We can do just about anything we want with this. We could have changed this with CSS. We could have said inside of this particular template, remove the padding and other elements like that. We could have done that with this but we can also simply not add the HTML to it that makes that happen.

What I really want to do with this though is make it its own separate template. So I’m going to come over here to my-templates. I want to copy it, paste it and instead of custom-header-template it’s going to be widget-header-template. Open that one up, we’ll call it Widget Header Template.

Obviously we’ll get rid of all this and so now we have the widgetize_header and we’ve added our full-width-header-image classes still. We can save that and over here, we’re just going to restore that and remove this.

Now what we have is 2 different custom templates. I’m going to rename this one because I misspelled it, widget-header-template. Now I’ve got a second template, so I’ll come back over to my-templates and upload both of those.

This first template we created goes back to the way it was because now we’re not using the widget-area on this one. If we want to change the template what we do is come back over here to our Page Attributes, instead of Custom Header Template we take Widget Header Template, update it, view page and there it is.

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