In this session we demonstrate how to add multiple menus to Thesis 2. As usual, the menus themselves are created using the WordPress Menu system. We show how to add them using the Nav Menu box in the the Skin Editor which gives us a choice of menus to display. We talk about how to place different menus on different pages. We also discuss how to style menus individually by assigning a different class and creating a brand new menu package.
Rick: You want to know how to create multiple menus.
Rick: And so the first thing you got to start off with of course is you just come over to the WordPress menu system.
Rick: And right now, I have two menus in my demonstration site. I’ve got a footer bottom menu and a main menu. I’m going to create another menu. I’m going to call it the category menu so you could see one created. So we’ll call it category and then we create a menu. And then with it created, I’m just going to come down and say, put my categories in there. So I’ve got those 4 categories, add those categories to the menu, save the menu and now I have 3 different menus that I can choose from to display on a page. And I can display all 3 of those on a Thesis 2 page very easily.
So then I happen to be working in Thesis Classic at the moment so open up the Thesis Skin Editor and then come down here and take a look at the nav menu. You know, I have this choice of menus to display. I’m going to go ahead and have the main menu display there.
Member: Oh wait a minute. Could you go a little slower with that? That was…
Member: The nav menu was already in there, right?
Rick: Well, this blue box, this nav menu is a box that exists inside the classic skin.
Rick: When you install Thesis and you activate the Classic Skin, this nav menu is going to be in here some place, generally right where it is because this is in the default setting. Now, I’m going to create… and this nav menu always has this option here for you to choose which menu you want to display.
Rick: So I’m going to create another one though. We’ll come down to my add boxes box and then just come down and select wp nav menu. And this one is going to be my category menu. It doesn’t matter what you call it just as long as you know as long as it makes sense to you. And then drag it up into place. And I think I’m going to put it directly below the header. So drop it up there and then put it below the header and then select the category menu.
Now if I save that template, come over and take a look at it, here’s my category menu that I just added and here’s the menu that… there’s the main menu.
Now I’ve got a footer menu too, that’s not been added here so I’m going to add my footer menu as well. So just repeat that, come over here to add box, go to wp nav menu, call this one my footer menu. Add that box. I’m going to shift drag it and drop it into the footer. No, I think I’m going to… I’m going to put it above the footer. So I’ll dropt it into the container and then drag it down so it’s above the footer. And then choose the footer bottom menu and hit save. And now, I’ve got a footer menu, a category menu and a standard menu.
Now one of the things you’re going to notice is if I go to…
Member: For the menu somehow… I didn’t see the footer menu.
Rick: Well, you don’t… okay, the footer menu’s right here.
Member: Oh okay. Something happened to my screen, it just took longer.
Rick: Okay so now one of the things you’ll notice is that this is only on the front page. If you come over to a regular page, we only have one menu there and that’s because we didn’t… we only added these menus to the front page. Those menus don’t exist on the other pages yet. So to the extent that you want different menus on different pages, all you have to do is create a different template for that page and then you can put whatever menu you want on it. I mean, really, the sky is the limit in terms of the number of menus you want to add to your site this way.
Rick: It’s very, very…
Member: That seems really easy.
Rick: It’s very easy. It’s so much easier than it used to be. And I mean, right now, they’re all styled the same way, right? So you go to the CSS and you’ve got a single menu package. And that menu package is styling… come on, let’s open up. That menu package is styling the selector.menu. You could choose to rename the selector on one of these things so let’s go back over to the front page again for a second and say our category menu. Instead of it being menu, we could call it category menu. At which point, that style will no longer apply. And so, come back over to our home. Now it’s in this stacked line here because we don’t have a style that’s ready for it to use or that’s ready for it to style it.
So we would have to come back over here to CSS and then select a new horizontal drop down menu package. Add the package and make sure that the selector that we choose is category menu. And we’ll call it category menu and category menu and then come over here and just add it to our… actually, I’m going to add it where the rest of the menus are. Where is the other menu? Up here. So paste that there, save that CSS. And now you’ve got a style that styles the category menu and you can just go through and set up its colors and everything just like you did with this one.
Okay so that’s how you style a different menu… or style menus differently. You assign them a different class and then you just create a brand new category menu… or I mean, a brand new menu package for that.
So you know, we could have our links, let’s say our text color’s going to be white or very light. A better background color is going to be dark blue and the hovered links will stay that light white. But out background color here will become a lighter blue and we’ll leave the rest of it alone. Well, let’s see, give it a little bit of padding. So we’ll say 10, 20, 10 and 20 for padding. Save that and now you got a whole different menu style, right?
So it’s that easy. It’s very, very simple to do this.
Member: What about having, what do you call them, drop down from each of the menu items?
Rick: Sure. So I assume from the question that you’re asking that you’re not familiar with how the WordPress menus work. The drop down menus are very easy to add so we’ll just go over to Appearance and Menus. And then let’s say you want to add… well, let’s go over to our main menu. Let’s add some drop downs to that. So let’s add our sales page, our samples page and… oh no, let’s not do it that way. Let’s add Edmonds View Remodel, Eastside Craftsman and West Seattle View Home. We’ll add those to the menu and then we just drag them up into place. And if they’re indented in like this then they are drop downs of that menu item.
Rick: So hit save, come back over and refresh the page. And now, Finished Projects has that going on, that drop down.
Member: Awesome. Excellent.