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 5 – Understanding the Thesis Header & Nav Menu

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

A number of people noticed that I misspelled functions and you might wonder why it didn’t fail because I’ve misspelled functions here. The reason why it didn’t fail primarily is that I’m defining the value of this and I could name this anything I want.

I can name this FISHSTICKS and it would still work because there’s nothing right or wrong about the name, it can be misspelled as soon as I keep on doing the misspelling when I use this constant. If I misspell the constant when I use it, that is by spelling it like this now and then spell it correctly when I want to use it then yes, that will definitely fail.

In this case, it doesn’t actually fail but you don’t want to misspell it though. Now, have I mispelled this, f-u-n-c-t-i-o-n-s, it still wouldn’t have failed and the reason why is because I’m not trying to use the function yet. Until I try to use it, simply defining it doesn’t return success or failure. Simply defining it, defines it, you don’t find out you fail until you try to use what you’ve defined.

This wouldn’t have failed if I had FISHSTICKS here instead of FUNCTIONS, it would simply have made this a constant. If I used it and FISHSTICKS didn’t exist, then it would fail. Thank you for catching that.

How Thesis Builds the Header and Nav Menu

The next thing we’re going to do then is start talking about the Thesis header and the Thesis Nav Menu. What we’re really going to start off here with is a conversation about how Thesis builds the header and how Thesis builds the Nav Menu because it’s critical to understand how Thesis does this in order for us to do it.

We’re going to look at a Thesis file here and what we’re really going to do is follow the path that Thesis follows when it renders a page and what Thesis starts off with is frameworks.php. As soon as it begins rendering the page, Thesis calls functions.php and functions.php starts off with this function thesis_html_framework.

Thesis Full Width Layout Framework

In this thesis_html_framework, it creates the head and it sets up the body and the body classes, it puts the hook in before html inside the body and then it makes some decisions about the page whether or not you’re using the page framework or the full width layout framework.

Once it has decided whether it’s page or full width, if it’s page it goes to thesis_framework_page and if it’s full width, it goes to the function thesis_framework_full_width. That’s what we’re going to do because we’re a full width framework so we’re following this path, that is this function here, thesis_framework_full_width.

Thesis Filter for Header

Now, it asks if the Thesis filter show header is true, then start wrapping the header and if it’s false, you don’t do anything. This is how you can exclude the Thesis header from a page if you were creating a landing page, you’d use this Thesis show header filter and return false and when you return false, then the header doesn’t show up.

Anyway, it goes to thesis_wrap_header and it starts off with <div id=header\”header_area\ which we just saw as the class of full width and then creates another structural div with a class of page and then it goes to thesis_header_area function. Once it comes back from the thesis_header_area function, it closes out each of these divs. You’ve got the page div closes and then the header_area div closes.

Thesis Header Area

Currently, the navigation menu and the header are both contained inside of this function called, thesis_header_area. If you’re using NetBeans as a project, you can search the project for this function name to find out where it’s located. What I did was just copy that function name then I come over to thesis_184 and I say, find, paste that name in there, hit find and now it’s showing me every place that thesis_header_area is referenced.

It’s referenced twice inside of framework which is what we’re looking at now and it’s referenced another time under header.php. In this case, it’s being defined there because you can see it says, function thesis_header_area so we’ll just click on that and it’ll take us to the thesis_header_area.

So, thesis_header_area places the hook before the header, the Thesis header and the hook after the header. The thesis_header is defined in the function below this and that is the div=id header, thesis_hook_header and closes that div=id.

Everything we have seen so far is essentially creating the structure. Frameworks started by creating the structure of the entire document with body and the structure of a <div id=\”header_area\ and <div class=\”page\ inside of that and moves on over to here, adds a hook, adds “\t<div id=\”header\, adds another hook, adds closes out div=id header, adds another hook then comes back and closes out div and a div=id header_area. That’s the process that this goes through.

Thesis Hooks

Notice that the only thing that Thesis does here is create this hook inside of header. It’s not immediately clear exactly what happens here but what happens is that thesis_default_header gets hooked to this hook. The thesis_default_header is thesis_hook_before_title, thesis_title_and_tagline, thesis_hook_after_title.

Thesis places all of its action hooks in a file called, launch.php. If you wanted to find that, you could again search the project for it. We saw it in the header and we saw it in launch.php. We can even see see this statement add_action (‘thesis_hook_header’, ‘thesis_default_header’).

If we come over and look at launch.php, it is where Thesis removes actions, add these actions, add filters, add shortcode and remove some shortcodes. Essentially, this is the file that gets called at the very beginning of Thesis.

If you come over to Thesis and look at functions.php, the very first thing that happens once all the administrative things are defined and once everything has been included, is launch.php. So, launch.php adds and removes actions and filters, that’s what it does. It’s where Thesis includes all of its add action, remove action, add filter and remove filter. That’s going to be interesting when we see where we do the same thing.

Anyway, thesis_default_header has been added to thesis_hook_header and when the thesis_default_header is added to thesis_hook_header, it adds the thesis_hook_before_title, thesis_title_and_tagline and the thesis_hook_after_title.

Thesis Title and Tagline

We’re going to take a look at Thesis title and tagline here for just a second. Let’s search Thesis for that again and see where that is. It’s saying that there’s a reference to it in thesis.php which is the one we are looking at and under document.php, it’s defined in this function, we’ll click over here and see the function thesis_title_and_tagline.

What it does is it calls the global variable Thesis design and it makes some decisions about what kinds of things are going to be displayed. For example, if in design options you said, “display that title”, then it’s going to go through the process of displaying the title.

If it says you display the tagline, it’ll go through that process. This is where all the action happens, that is it either shows the title or the tagline or the title and the tagline. If you’re going to use an image then it uses custom CSS to reconstitute how this works. The reason why I’m getting all the way to this point is because when we are creating our own header, we’re going to be starting right here.

Global Variable Thesis Design

We’re going to grab global thesis_design and we’re going to be asking some of the same kinds of questions so it’s important to see where each of these different elements work that way through so that we can borrow existing Thesis code to do what we want to do even though we don’t want to use it the same way that Thesis does. That was the title and tagline.

Thesis Nav Menu

The next thing is the Thesis Nav Menu. Notice that we haven’t seen the Thesis Nav Menu anywhere in here and the reason why we haven’t seen that is because again, Thesis Nav Menu is being called by launch.php. You see that Thesis Nav Menu shows up in two files, it shows up in launch.php and it’s defined in nav_menu.php.

The reason why this launch.php is important is because this is where the add_action happens that adds the Thesis Nav Menu to the header. It’s this add_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’); and I’m sure you’re familiar with removing the Nav Menu where we say, remove_action (‘thesis_hook_before_header’, ‘thesis_nav_menu’);.

Thesis does exactly the same thing in adding the Nav Menu in the first place, that is it hooks it to a hook and that hooking action is found inside of launch.php. If we wanted to look at the thesis_nav_menu here for a second, Thesis will either use the thesis_nav_menu or the WordPress menus and it does that based on a couple of things.

Thesis Nav Menu and WordPress Menus

First off, it does so based on what you set in Thesis site options then also, it looks at the WordPress settings to see whether or not a menu has been defined and it also looks to see if a menu has been assigned to the primary menu location. When we start off with the thesis_nav_menu, it grabs the global variable Thesis site and it asks to see if we’re using a version of WordPress that has wp_nav_menu so that means a version of WordPress that’s 3.0 or later.

Essentially what’s happening here is if you use Thesis with 2.9, it would just go to Thesis default automatically because the wp_nav_menu doesn’t exist but if the wp_nav_menu exists and in the site options you’ve said that the type of menu you want to use is the WordPress menu, then it calls wp_nav_menu.

If you’re in WordPress 3.0 or later, and you’ve said you want to use the thesis_nav_menu, then it skips down and calls the thesis_nav_default. It’s one of these two conditions that happens, either the wp_nav_menu or the thesis_nav_menu_default.

What it does here is it starts off by relying on wp_nav_menu which actually has something before wp_nav_menu and that is register_nav_menus. You noticed it says, theme location=primary.

In order for there to be a theme location called “primary”, you have to have created that theme location the first place. What Thesis has done is it has defined that theme location and if we search for register_nav_menus, we see that also exists in launch.php. If we come over to that function, you can see that if the function exists, register_nav_menus.

Again, if it’s WordPress 3.0 or later, if the function exists, register_nav_menus then register this location and the location that’s registering has a slug called ‘primary’, its name is ‘Primary Menu’. That’s what you see when you’re in your menus here.

If you’re in Appearance and Menus, this primary menu, that location there, that is caused by this call in launch.php that creates the primary menu location. If that didn’t exist, if there wasn’t a registered menu, then you wouldn’t have this drop down to choose from.

Register Nav Menus

That brings us to this conversation about register_nav_menus. You can use this function as well and I’ve found that the explanation of register_nav_menus and wp_nav_menu is not very clear so I’m going to try to be more clear.

What register_nav_menu does is it registers a handle that you can later add to the child theme some place. In this case, register_nav_menus and that handle we call a location. It doesn’t actually end up being a location until you’ve located it on a page but right now at the register stage, it’s a handle called location. What you’re doing is you’re registering a series of handles.

In this example here, ‘pluginbuddy_mobile’ is one handle and ‘footer_menu’ is another handle. If you were looking at a theme that had these, you would see ‘PluginBuddy Mobile Navigation Menu’ as one of your location choices and ‘My Custom Footer Menu’ as another location choice. Thesis creates a location called, ‘primary’.

WP Nav Menu

The second part of this is the wp_nav_menu. You register a menu then you call a menu with wp_nav_menu and it lets you do one of two things. You can either call the location or you can call a menu that’s already been defined. That’s one of the two things that you can do. Ordinarily, you don’t define menus for people, you let people create their own menus and give them their own menu names just like we do when we set up a site.

The only time you would use wp_nav_menu is when you are using a specific menu itself and  you have created that menu already. We haven’t created any menus yet so what we’re doing here is we’re telling Thesis where to put whatever menu is assigned to the location of ‘primary’, that’s what Thesis is doing here in this function. It says, “Okay, we know that there’s a location called ‘primary’”.

What Happens When No Menu is Defined for Primary

What we’re going to do is place whatever menu has been assigned to the location of ‘primary’ in this location. It has one other setting which is it gives a fallback callback. The fallback callback is essentially what happens when there is no menu defined for ‘primary’.

If there is no menu designed for ‘primary’, then it falls back to this function called, thesis_nav_default. It’s either going to assign the menu that is assigned to the primary location or it’s going to fallback to the thesis_nav_default. That’s why sometimes you see this default_nav_menu on your site even though you said you want to use a WordPress menu. You’re going to see that until you actually define a WordPress menu and assign it to the primary location, you’d still end up seeing this thesis_nav_default.

Thesis Nav Default

Then you have the thesis_nav_default and it essentially asks whether or not the thesis_nav_menu has any defined content to it. If it doesn’t have any defined content, then it just puts that home button in the subscribe button. If it does have defined content, then it puts the defined content in. That’s how this acts and that’s the process that this goes through.

We are going to be using our own system of that then in creating our header and that’s what we’re going to start off with.

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