Build Your Own Business Website header image

When to Use the WordPress Menu vs the Thesis 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 asked when it is appropriate to use the WordPress Menu system rather than the Thesis Nav Menu.  I actually use both on my site.  The Thesis Nav Menu is displayed to viewers who aren’t logged in and the WordPress Menu is displayed to members who are logged in.

In this video we look at the similarities and differences to the two menu systems.  We discuss whether one menu system is better than another.  We look at how CSS works for each of them.  How to customize the appearance of each menu and finally we look at a function to add the WordPress menu to a specific location.

Video Transcript

Kathy has asked a question: “When is it more advisable to choose WordPress menus over Thesis menus?” Now Kathy, I’m going to unmute your microphone. Kathy, can you hear me? Let’s see if you could join us. You might not have a microphone and speakers so okay… so your mic isn’t working. That’s fine. If you… I’m going to keep my eye on that question box so if there’s… if you need a follow up question, just ask it as I’m answering this question.

You know, as far as I’m concerned, there isn’t a right answer to this question. You know, personally on my site, I use both. Oh, let’s see… did I…oh, shoot. I forgot to finish this…oh well, I essentially finished it. Okay on my site, I have 2 kinds of menus. I use the default Thesis menu, let’s see, leave that page. Go to Site Options… I use the default Thesis menu for the non-logged in version of the menu. So if you come to my site… www.byobwebsite.com. If you’re not logged in then you get a different menu, right? It’s the blue menu here. It has a subscribed function and it’s got a thing for testimonials and stuff like that. It’s got stuff that you don’t really care about if you’re logged in. And so that’s what I use the Thesis nav menu for. On the other hand, for people who are logged in, I use a WordPress menu. And so, I’m not using a primary menu, I have a menu that I call “member menu” and that “member menu” has then the dashboard and the profile and then stuff I think that members are more interested in and that is the menu that looks green here. And so I use both menus and the nice thing about WordPress menus is that there’s a little bit more flexibility in laying them out than the Thesis menu has. The WordPress menu will let you mix and match categories and post types and tags and all kinds of things around inside of a menu without…really, without regard to what kind of a category it is. Whereas the Thesis menu you know, first it will let you put pages up and then next, it will let you put categories up and then next, you can put links in and then you can put external links whereas with the WordPress menu, all that stuff is mix and match.

Now the nice thing about both sets of menus is that by default, this menu system takes the same… the exact same CSS styles as does the Thesis menu. And so if you want to use, if you need more than one menu and you need them to look exactly the same, then you’re in luck because if you don’t make any changes to this menu at all, I mean, if you didn’t add any CSS styles for this different menu style, it would have the class UL .menu and thus, borrow exactly all of the styles that the Thesis navigation menu has. So that’s a handy thing.

Let’s see, so Pam asked, “Is there a downside to using the WordPress menu?” No, there is no downside to using the WordPress menu that I know of. You know, no, there’s no downside to using the WordPress menu that I know of. You know, I have some… I have a site that I built for a client that has context sensitive menus so you know, based on the content of a page, a different menu shows up. Well, the only way for me to do that is to use the WordPress menus and then, this is also the same kind of menu… this is the only menu system that really easily allows you to have something that Brian asked for once upon a time, I think, which is having that top level menu item not be clickable. Now you can tell you know, I’m not a big fan for the drop down menus and so I don’t have drop down menus here. But theoretically, you know, I could have… rather than having video lessons run off to this lessons page, it could you know, be non-clickable and then there could be drop downs for beginner video tutorials, intermediate video tutorials and actually, that might be a really good idea now that the list is starting to get pretty long. And so then Video Lessons doesn’t go you know, necessarily any place. Really the only… you can write some javascript to make that work for a Thesis menu but I think that’s more of than it’s worth. It’s just as easy simply to use a WordPress menu and then in the URL, just put a pound sign, at which point, it won’t get anywhere else.

And if you want them to be different styles then you definitely want to use the WordPress menus because if you just use this facility for creating a menu, then this menu automatically takes this class name in its style. So if we come over and take a look at let’s see, let’s take a look at it in one that where I’m already up. Here I am here, we’re just going to inspect this element. You can see that I have the… what is normally be called UL .menu here, because it’s a Thesis menu, and let’s go look at that over here for a second. Let’s inspect the element in a non-logged in condition. In the non-logged in condition, we have UL class menu and that’s the whole menu. In the logged in condition with this WordPress menu, you have a div class menu – member – menu because menu member is the name of that menu and then it has a class of container. So you could style this whole div separately from the UL if you wanted to. And then you have the UL id which is menu member menu, menu being the WordPress menu and then member menu being the name of that menu and then it has the class of menu. Because it has the class of menu, the classification UL .menu still applies to this.

However, if you want to make it different, you would just say UL id or UL #menu member menu and now anything that you put under that is going to be different and you can see that first hand from looking at my custom CSS file. If we go down and look at the…oh, let’s see, where is the member menu? Let’s see, okay. Alphabetical… where is that silly thing? Okay, well let’s just search for it then. Menu, oops. Okay, so here’s the main menu, custom menu UL custom… okay. So here’s my definition for my custom menu. So it’s #menu_member_menu.menu and now I’ve changed the background color you know, and then menu A, I’ve changed that background color and otherwise, I’ll leave it the same as the original. So this is how you make it slightly different is by referencing the id of menu member menu or #menu – menu name, essentially ‘coz if I named it… this is confusing since I’ve named it member menu. If I had named it you know, Hedwick then it would be #menu – Hedwick and because that would be the name of the menu name.

So let’s see, we are a couple of minutes past and I think we are finished. So let’s see, Kathy says: “So if I’m understanding you right, if I use many different menus, it would be better if I use only WP menus. Currently, I have 2 Thesis menus but need to add many individual menus on different pages.” Well you know, you can certainly the process. I think if you’ve got lots and lots of different menus, there’s nothing with just using all of these menus. But the trick to them is you know, the way that you add them to the page. And so if we look at my let’s see, I think it’s probably under User Functions. No, it’s not under User Functions, it’s under Templates or maybe just custom functions. I have this complicated system here but let’s see, menu choice, okay. And so you know, I ask in this function if the user is logged in, then you use the command: wp nav menu and then I indicate you know, the name of that menu which is member menu here. Otherwise, it uses the command thesis nav menu. And so you do have to learn this little piece of code… let’s see, let’s get rid of this. No, that’s not what I wanted to do. Okay, and so you do have to learn that little piece of code. Where did that little piece of code go? You know, wp nav menu. But once you’ve got that piece of it then it’s very easy to insert each specific menu wherever you want it. And yes Kathy, I will paste this code to the forum so that you can see what this code looks like.

2 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
2 comments… add one
  • BlankSlate December 2, 2011, 6:37 pm

    Great feature to this love the customizing… THanks

    • Rick Anderson December 5, 2011, 5:58 am

      I understand that in Thesis 2.0 there won’t be a Thesis Menu any longer and we’ll just be using the WordPress menu system.

Leave a Comment