Build Your Own Business Website header image

Add a Category Menu Below the Thesis Nav Menu

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

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.

A member wants to add a second navigation menu to his Thesis site. He wants to add a category menu below his header. He also wants the menu to look and behave exactly as his Thesis Nav Menu does. In this lesson we add a new WordPress 3.0 menu and then hook it into a Thesis site. We also demonstrate some of the functionality of the WordPress menu system.

Video Transcript

Okay so first up I’m going to answer a question that was asked this weekend on the forum and that was how to add a 2nd menu to Thesis that would show the categories rather than pages. So you’d have the main menu that would show pages or whatever and then you have a 2nd menu that would show categories. And this member wants those menus to look and behave identically. And so I’m going to show you how to do that using WordPress 3.0 menus.

Now, this is the site that we’re going to do it on. It’s a site that I use regularly for demonstrations so it’s got lots of posts and lots of categories in it. And what we’re going to do is we are going to go dashboard and scroll down to Appearance and Menus and then we are going to create a new menu. And that menu, we’re going to call category. Okay, so we have created a menu, named a category and now, we’re going to put categories in it. And so, we’ll put… let’s see, let’s just view all of those. So apples, bananas, cherries, green apples, oranges, red apples and yellow apples… and we will add those to the menu.And now if we want to move them around a little bit, let’s say we want apples down here all together. So we’ll bring apples down like that and green apples down like this. And now, we’ll have a menu bar with bananas, cherries, oranges, apples and these across. Okay so if we save that and we go back over to the site, it doesn’t appear as if anything’s happened because we also need to hook that menu some place and we’re going to hook that menu to the Thesis hook after header.

And so let’s open up our code. This is my custom functions php file for that website and we are going to..right here at the top, start a new piece of… a new function. I’m going to copy this comment and code and use that to begin with. So this adds the category menu to below the header. Okay and so let’s just do this function and then add byob, add category menu. And then opening brackets and automatically inserts closing brackets. So there’s our function and while we’re at it, we might as well add the function to below the header. So add action, open and closing parentheses, opening and closing single quotes, and we’re going to hook this to Thesis hook after header. And then comma, space, open and closing quotes again, and it’s going to be this function name. And then we’ll put a semi-colon after that. And so now, we’ve named a function and we’ve added it. Now we just need to tell the function what to do and what we are doing is something that’s new since WordPress 3.0 and that is the new menu system.

We are going to use a function called WP nav menu and if we come over here to the codex, you know if you… we’re going to look at WP nav menu and you can see the code right here. It just says WP nav menu and then its arguments. It can take quite a large number of arguments. It can take a thing called Theme location where we could create places where menus are automatically added instead of using a Thesis hook although we won’t do that. This is the menu name, this would be what kind of a container the menu is in… by default, it’s a div. Or whether or not what kind of a container class it ought to have or whether or not it ought to have a container id. Plus we can give the menu a class or a different class or in a menu id or there’s you know, something we can put before the menu, something that we can put after the menu, a link that we could add before or after. There’s just a lot of things that we could add to this but we aren’t going to add any of those. All we’re going to do is we’re just going to tell it the name of the menu to add.

And so, we will take this little piece of code and copy it. Come back over here to our functions file and then we’re going to describe our args. So args equals array and then the first thing is menu and that took the menu name. So equals greater than and then we called it category I believe. Menu, category and then semi colon… we could have put a whole bunch of other things in here too but we’re just going to leave a very simple one. We’re just going to call that category.

And so now, we’re calling the function WP nav menu with these arguments essentially with menu equals category. So let’s go ahead and save that. Open up our FTP manager and upload that to the site. If we come back over here to the site and let’s refresh it, see if it shows up. There it is. So now we have all of these different things on the site and you’ll notice that I changed the hover color on here so that as the hover color changed on my Thesis nav menu, it also changes down here. Without any modification, this will automatically accept the values or the CSS values of the main menu.

Now, let’s modify this a little bit though and let’s go to Appearance and Menus. And then let’s make green apples and red apples and yellow apples submenus or sub selections under the apples menu. So if we cave that and then let’s go over to Thesis Design Options, I just wanted to show you this… and then go to the nav menu, now instead of this purple, let’s use a dark green for the hover color. And then for the text color, let’s make it white so that’s 00000. No, that’s ffff right? Okay, so the text color is going to be white and the hover background color is going to be green and this is going to affect both menus together. Come back over here and now you can see we have switched it down and now, green apples, red apples and yellow apples are submenus of apples. And if you select it of course, it takes us to the right place. Cherries… and this is exactly the same thing. These hover colors or the styles stay exactly the same.

Now fortunately, there’s also a way of adding a different class name to this so that you could change how this looks if you wanted to place it someplace else. But the task here was to make an identical nav menu that behaved just like this nav menu does so that’s what we’ve got.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment