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 2 – Create a Custom Template with a Custom Header in Genesis

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

Applies to -

Now that we’ve gone over the fundamentals of setting up a Genesis Theme custom template, we’re going to take this custom template and create our own custom header for it. Right now, we’ve got the standard header with the logo on one side and the widget area on the other.

Add an Image that Spans the Full Width

What we’re going to do instead of that is to remove all of that and replace it with a different header image that spans the entire width. That will be our first example.

Unhook Existing Function

As you probably remember from previous conversations, the way to do that is to unhook something from a hook. The hook that we’re going to unhook from is the genesis_header and the function that we’re unhooking, the function that incorporates all of this, is a function called genesis_do_header.

Let’s come back over to our file and just say remove_action and then the hook is ‘genesis_header’ and the function name is ‘genesis_do_header’. This remove_action is only going to fire on this template so this is not going to affect any other template that we have. It’s just going to affect this one template.

Let’s save that and upload it and then refresh our page. The header is gone. We’ve got a big white space up there. Let’s inspect our element and you can see that we’ve got this header class=”site-header’ role=”banner”.

Review the Header Code

If you look over here, you see that .site-header has a minimum height of 150 pixels. That’s what makes it this size even though there is no content, that comes from style.css in the child theme styles.

If we wanted to remove this, which we’ll do in another example, we would have to remove Genesis wraps as well but for the time being we’re going to leave Genesis wraps in place. We definitely want the header and we want this div class=”wrap” and we want the closing header and the closing div.

In between here is that hook that we just unhooked, that genesis_header hook, and what we’re going to do next is add our own HTML to this.

How To Add an Image to the Custom Header Template

We could start by using an images folder. Let’s just double check that it does have this folder. So, it does have an images folder in it. What I’m going to do is take an image that I have which is under My Documents, My Business Website. It’s header-transparent-1140. This is an image that is 1140 pixels wide. Actually, I’m going to take out transparent and we’re just going to say header-1140 because if you do that your customer could replace his image with an image with the same name and it would show up.

So, I’m going to copy this and then come back over to that section on my site. So it’s Customize Genesis Like a Pro (CGLP), wp-content, themes, enterprise-pro, images and I’ll paste that here.

Create the Function to Add the Image

Now I’ve got my header there and then what I need to do is add the action. Actually, I need to create a function first. That’s function byob_custom_1140_header, so there’s the function. Then I’m going to add this function, add_action and it’s going to be ‘genesis_header’ and then the name of the function. So, add_action(‘genesis_header’, ‘byob_custom_1140_header’).

Call Header Image from the Images Folder

What we’re going to do is call this header image from the images folder and then we’re going to link it to the Home page. This means that we want to use a couple of WordPress constants in order to get an address because we really is this to be kind of relative.

If you take this customized child theme and you move it to another site, you want to be able to so without having any hard coded URLs in it. So in order to avoid having hard coded URLs we’re going to use some WordPress constants.

The first thing we’re going to do is leave PHP and then we will enter PHP. Then we’re going to use standard HTML in between. So first off is a href= and we want this to link to the Home page so we could put the Home page URL here physically. We’ll do that first, so a href= title”return to our homepage” and we may as well have alt=”Learn to customize Genesis”.

There’s our “a” and we’ll do our closing “a” tag then. So that’s the link and now we want our image, so img src= that’s the source for that image. And so it’s that / and then it’s wp-content/theme/enterprise-pro/images/header-1140.png. This is an absolute URL to this header.

Actually, the alt doesn’t go up there, does it? That was a mistake. The alt comes down here in the img src.

Then in order to expedite the rendering of the image we’re going to give it a height=150px and then width=1140px and we can close our image tag. So there’s our image tag, img src=. We’ve got the src and we’ve got the alt and we’ve got the height and width and it’s linking off to our Home page.

Let’s save that and upload that plus upload images. Now when we refresh this page, we should have our image showing up here. And there’s the full image now although interestingly, it’s a little bit wider because “site-header” wrap is getting a padding of 4rem.

So in this case, we would also need some custom CSS that would say 0, right. Notice that this didn’t change any of the other pages. If we click on this it’s going to take us to our Home page and it had absolutely no effect whatsoever on any of these pages because they don’t have this custom template applied.

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