Lesson 9 – Part 2 – Move Thesis Navigation Menu Below Header

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 9 – Part 2 – Move Thesis Navigation Menu Below Header

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.

Welcome back to Part 2 of lesson 9. In this part of the lesson we are going to move the navigation menu from above the header to below the header similar to the way it is here on my site.

I’m going to open up Firefox. This is the site that we are building and you can see here that the Navigation Menu is now no longer above the header but it’s down below it. In fact you can see that this is the full-width framework in action here because you can see this header area continues straight on across and this footer area continues straight on across.

Let’s open up our website. The website that I created for the purpose of this is www.estore9.byobtutorial.com and this is essentially where we left off on our last lesson. Next we’ll open up Firebug and then I want to go up here and inspect the element for the menu. I want to take a look at the HTML structure of it. Remember we have the body and then we have our header area. You can see how it glides up in blue there and inside that header area we have this div class page and inside that page we have menu. Below that menu we have header and so what we want ultimately to show up is that this ul class menu is below div id header. The way we’re going to do that is with hooks.

Review Thesis Hooks

So what I want you to do is to go to diythemes.com and log in so we can take a look at the user’s guide.  Go on over to the User’s Guide and now that we’re in the DIY Themes users guide I want to take a look at the Hooks.

You see that there’s this entire list of Thesis hooks and in spite of the fact that this says that we’re running version 1.7, we’re actually in 1.8 and all of the new hooks that are part of 1.8 are included in this Thesis Hook Reference List. So the other thing I want to open up is the visual guide and you can see here on my list I’ve got a link to the visual guide to Thesis hooks. Now this is not nearly as up to date but as you can see there’s a thing from 1.4 and there are hooks and filters that exist in 1.7 and 1.8 that don’t exist here but that’s not particularly important for the time being.

We’re going to go ahead and take a look at the Thesis hooks on the homepage. Here we have our menu and it is actually hooked to thesis_hook_before_header and if we want this menu to be below it then what we’re going to do is to actually place it not in thesis_hook_header but in thesis_hook_after_header.  We have all these other hooks in between, you know, thesis_hook_before_title, thesis_hook_after_title, thesis_hook_header and thesis_hook_after_header and that’s the one that we’re going to select.

Come back over here and take a look at this reference list for a moment. If we look at thesis_hook_after_header you can see that it exists just after div header and if you look at the HTML structure you’ll see the div id header and then div, that’s immediately below that and that’s essentially what we want to accomplish. We have our div id header and we want to grab the hook immediately after that.

Open and Edit custom_functions.php

In order to do that, we need to open up our custom_functions.php file in the text editor.  I’m using Net Beans here and this is that custom_functions.php file and this is exactly as it comes out of 1.8 installed. I’m just going to take a whole bunch of this stuff and delete it because none of it is really necessary. In fact none of this is necessary. Then I’m going to add a comment and this is going to say custom_functions.php for thesisestore9 and we’ll go ahead and leave it at that.

Now below this is where I’m going to put my first function. In order to do this part of the class you will probably want to review the Introduction to PHP in Customizing Thesis Like a Pro because I’m not going to repeat that information here but we’ll start off by removing the Thesis header. It’s fairly simple. We’ll just say remove_action and then opening and closing parenthesis, single quotes and then we’re going to use the name of the hook. So it is thesis_hook_before_header and go over, put a comma, space, opening and closing single quotes and then we’re going to remove the nav menu. That is thesis_nav_menu. Come over and close out this statement with a semi-colon and that’s all we’re going to do.

The first thing we’re going to do is remove that Navigation menu. Go ahead and save our custom_functions.php file and then we’re going to need to open up Filezilla. Then we’re going to go ahead and rev up the site and then we’re going to go to themes, Thesis 1.8, custom, and custom_functions.php which we’ve just changed. Let’s go ahead and upload it and let’s take a look at the site.

So here’s our Navigation Menu as it is right now and if this works properly it will completely go away. Yep, there we go. Navigation Menu is now gone.

Now we need to add it back to the place where we want it. So come back over here and we’ll do exactly the opposite of that; we are going to add_action, parenthesis, single quotes and we’re going to add thesis_hook_after_header, move over, comma, space, single quotes and then it’s going to be thesis_nav_menu. Close that with a semi-colon and that should now place the Navigation Menu where we want it. Let’s save it, upload it and test it. Okay, there we go. The Navigation menu is now down below the header.

That wraps up Part 2 of Lesson 9, Move Thesis Navigation Menu Below the Header.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!