WordPress Advanced Navigation Menu Options Built In

 

WordPress has a wonderful navigation menu builder, but at first blush it can seem pretty simple. Fortunately, WordPress has some advanced featured BUILT IN that can take your menus to the next level.

Transcript

Hey folks, welcome to another HeroPress Tip of the Week. This week, we’re going to look at some cool options for your menus, things that are built in and do not require any plugins or custom code or anything. It’s just built right in. We’re here at the default menu page, under Appearance Menus. And I have a menu called primary. There’s nothing in it yet. So I’m going to add a blog on my home page. So there we are. And if you open it up, you can change the navigation label, if you want, you can move it. And this shows what the original is you can move and cancel. However, there’s a bunch more stuff you can add to this. Up in the top right, there’s a Screen Options tab. And right here, it says Show Advanced menu properties.

So let’s turn on the link target. And you’ll see that right here. Now there’s a checkbox to Open Link in New Tab. Now, I don’t know if you’re aware, but there are some security issues with opening a link in a new tab. But doing this, using this method, it adds all the proper code to avoid those security issues. So if you want your navigation item to open in a new tab, you just turn that off, just check that it save. Then there’s the title attribute. And now there is a field to type in a title. Now the title appears when you mouse over the menu option, like a tooltip. Then we have CSS classes. And again, it’s just a field and you can type in whatever you want here, whatever CSS classes you want to make up. So if you want your blog, safe to be slightly bigger than every other menu item, you could add a CSS class here and then write the CSS somewhere else to make that particular item bigger, or anything you want, literally anything.

Next, we have the link relationship, or XFN. And that gives you a field right here and you can type some things in. But I want to tell you about the XFN because it’s pretty slick. It stands for the XHTML Friends Network. And it is similar to it tells what relationship the link has to your site. And right here it says you can think of extra fat XFN as a distributed social networking. So Oh, come on. So here’s some examples. So you have a link to John’s blog, where you can put in rel=”friend”. And you could also put in referral. rel=”friend met” means you have actually met John. And there are a whole bunch of things you can do. Contact, acquaintance, friend, coworker, colleague, child, parents, siblings, spouse, kin. There’s romantic ones, there’s all kinds of things you can put in here. And you can’t just make stuff up, you need to follow the XFN standards. But they’re all right here and there aren’t that many I just showed you all of them. So turning on extra fan allows you to show the relationship of that link.

And then lastly, we have description, which just gives you a big old textbox and you can type in multiple sentences. Now it says right here, the description will be displayed in the menu if the active theme supports it. So you may turn this on type of stuff and not see anything. That’s just the way it goes with your theme. You could choose a different theme you could hack the theme you have and make it type the description. Your options are yours. But what I want to just to make you aware of to show you is that all of these things exist and you can turn them on and really do quite a lot with your navigation menus. I hope you find it useful.