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 2 – Part 6 – Construct the Child Theme Header

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

We’re going to construct the child theme header. Here we are in our functions.php file and we’re going to start using this new file structure with this file. We’re going to do that under lib, functions and we’re going to create a new PHP file.

That PHP file is going to be called, crtc_header. That automatically created us a file and it gives us a comment block and an ending php tag. We don’t want an ending php tag so we’re going to delete that right off the bat.

Create the Header Function

We are going to start off by creating our own function and that’s going to be, “function crtc_add_header_html”. We’ve got a unique name, it’s descriptive, we understand what’s going on here and that header_html is going to do a couple of things.

Create Left and Right Divs

The first thing it’s going to do is create two divs, it’s going to create a left div and a right div. In the left hand side, we’re going to put the thesis_default_header and in the right hand side, we’re going to put the menu. If we come back over and take a look at this for a second here, that’s what’s going on here. We’ve got a left hand div which is where the Thesis default behavior goes and we have a right hand div which is where the menu goes.

If we take a look at what that structure looks like here, you can see that I have inside of header, I’ve created two divs, header-left and header-right which is what we’re going to create now. Inside of header-left, we’re going to put the thesis_default_header and inside of header-right, we’re going to put the thesis_nav_menu.

Ways to Create Divs

We’re going to start off by creating those divs and there are two ways to do this which is to either escape PHP and go to HTML or to stay in PHP. At the moment, I’m going to stay in PHP. I’m going to say, echo and we’ll use double quotes because I’m going to escape some HTML characters so, there is the tab character “\t so we say, echo  “\t <div id=\”header-left\”>”;. This is essentially adding div id header-left, that’s the opening part of it.

We may as well just go ahead and echo the closing part, echo  “\t </div>”;. Our left div, we’ll do exactly the same thing below that with our right div, echo  “\t <div id=\”header-right\”>”; and “\t </div>”;. Now we’ve got our HTML structure that’s going to go inside the header and that’s going to be a left div and a right div.

Call Thesis Default Header in Header-Left

Now, of course, these don’t do anything at the moment; we want to put header and menu inside of them. Inside the left div, what we want to do is put the thesis_default_header. Remember this here, that’s the thesis_default_header, we’re just going to call this function here. We have called the function thesis_default_header and it’s going to show up inside of header-left.

Placing Standard Thesis Nav Menu in Header-Right

The next thing we want to do is call the menu inside of header-right. In this case, we’re going to do it differently than they do it here but we do essentially need this code. We don’t need that code, I wrote it with this code but in fact, we don’t really need all this code. All we really need is the function name itself, thesis_nav_menu. That makes this whole thing a lot easier.

What we’ve done now is, we’ve placed the standard thesis_nav_menu behavior inside of header-right, this standard thesis_header behavior inside of header-left and we’ve put that inside of a function called crtc_add_header_html. Now, nothing’s going to happen currently because we need to do a few things.

Including File Names

The first thing we need to do is include this file name. Let’s come back over to our functions.php file and get down to our includes. We’re going to say, include_once and it’s going to be the name of the file in this case, that’s what it is, our include_once is simply the name of the file which is CRTC_FUNCTIONS with the concatenation symbol and our file name which is crtc_header.

Now we have included using our constants, (CRTC_FUNCTIONS . /çrtc_header.php’);. We’ve included this and including the file isn’t enough of course because we have to hook this function to something. We’ll start off by doing it outside of the class.

Remove Navigation Menu and Default Header in Thesis Page

What we’re going to do first is, we need to remove the navigation menu and the default header from the typical Thesis page. We’ll start that with a remove_action (‘thesis_nav_menu’, ‘thesis_hook_before_header’); and we’ll also remove_action (‘thesis_default_header’, ‘thesis_hook_header’);. This is why I took you through how Thesis does this so you know how to remove it. We’re removing the thesis_nav_menu and removing the thesis_default_header and we’ve included this file.

Add Function to Thesis Hook Header

Having removed these things, we need to include our new header. We’re going to say, add_action and we need the name of our function for this so we are adding this function name to thesis_hook_header. We’ve included this file, we’ve removed the thesis_nav_menu, we’ve removed the thesis_default_header and we’ve added our new header layout.

Just go ahead and save this, come back over to our thesis-responsive, we’ll just upload this whole thing and come back over to our site to see what happens because this is going to be different now.

What should happen is, this should be rearranged. I need to come over to Thesis design options and save this again. The reason I have to do that is because I had thrown out the layout.css when I uploaded all the child theme files that Thesis automatically generated.

Let’s make sure function.php file is uploaded, let’s make sure all of our lib is uploaded. Something is not happening, I hate making stupid mistakes. Thank you, Anne. This should be hook first, action second. First you have typos and then you have screw ups. I’m glad you noticed that, absolutely it was transposed, the hook goes first and the name of the function goes second. There was nothing big wrong with this except that I misspelled a couple of things and I disorganized a couple of other things.

Besides troubleshooting, what we’ve learned is how to define constants and we’re going to go back and get_template_directory. If you were looking really closely, you’d have noticed that in the one I created, I did not use that. I did this about 8 weeks ago as I was working on this and you want to talk about how these things work.

In my research, I realized that this is no longer the right way to do it which is why I’m not teaching it that way but when I originally wrote this, I did write that one. We’ve got that there, let’s upload it just to make sure it doesn’t crash. Perfect.

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