Creating and customizing menus

- Now that you have a better understanding of the theory of creating navigation on your site, let's look at how to create custom menus using the Customizer. To create a new menu, simply go to Menus. This will open the Menu Customizer. And from here you can create new menus, and also assign specific menus to specific theme-locations. You see, Out of the Box or Wordpress themes have at least one menu area, or menu location. You can see here if I open Menu Location, that in the case of 2015, we have two menu areas.

One called Primary Menu, and one called Social Links Menu. Now these are areas that are predefined inside the theme. And if we create a custom menu, and assign it to the menu area, then that custom menu will appear in that area. In most themes, the primary menu area, which is mandatory for all themes, will be pre-populated by a default menu if you don't do anything. The default menu will consist of a Home button, and then all your pages in alphabetical order. But in the case of 2015, there is no default menu, you have to create your custom menu.

Before we create our first custom menu, let me briefly bring your attention to this settings wheel. When you click it, you open the advanced menu properties that let you decide what you want to see in the menu Customizer for each of your menu items. Here you can display the Link Target, meaning where the link opens in the same window or a different window. The Title Attribute if you want to add title attributes to your site. CSS Classes. Link Relationships, and also the menu Description. In most cases I would turn Title Attribute, CSS Classes, and Link Relationships off.

And in many themes, description is not supported, so there's no point in having that opened. However, in 2015, many descriptions actually work, so I'm going to leave that toggle on. Now it's time to create that custom menu. I'll start by clicking Add a new Menu to create a new menu. I'll call it Main Menu because I'm very original. That's going to be the main menu that'll appear somewhere in this header section. When I click Create Menu, I'm taken to a new page where I can either add items, or select where the menu will appear.

Either Primary Menu or Social Links Menu, which are the two locations in my current theme. And I can also choose if I want to to automatically add new top-level pages to this menu. That option I have never in my life seen an application where that makes sense. So, honestly, I don't really know why it's there. But maybe you have a situation where that makes sense. The great thing about menus in Wordpress is you can add any type of item you want. When you click Add Items you get a list of all the different types of items you can add. And you can see you can create a Custom Link, which is just an URL from anywhere on the Web, or you put it the URL, and then put in the link text.

We'll talk about that in a little bit. Then you can add posts. And here you can select any of the posts that are published on your site. You can select pages, again, any page you've published on your site. And this is also where the Home link hides. You can create links to Categories, or tag archives. That means, for instance, if you go to the News section you get all the posts filed under the News category. And you can create links to your posts Formats. So, in my Main Menu I want to link to all my main pages. So I'm going to open the Pages tab.

And then add the Home link, because you should always have a Home link. And then each of the other pages that I've created for my site. Once the pages have been added, I can reorganize them by simply grabbing an item and dragging and dropping it into a different location. And I can also create those parent/child relationships in my menu, essentially making drop found items, by simply grabbing and item, and dragging it to the right. You can create as many parent/child levels as you want in these menus. But most themes only support up to three levels. Be a little bit careful with this.

After you've created the structure, you can also open each of these menu items and further customize it. So you'll remember I toggled on the ability to set the link target, so this is where you would do that, you can open a link and a new tab. And you can also set a description. So if I type in a description here, you'll see in a second where that pops up. Now you can open this tab to change the settings for each of your menu items. And this is also where you would remove a menu item if you don't want it. Now that I've created my menu and it's set up the way I want, I'm going to assign it to a menu location.

In this case, Primary Menu. Now you can see the menu appear in my site and you also see that menu description. This is the description which will appear underneath the menu item. This allows you a little more customization in this particular theme. But like I said, many themes don't support the menu descriptions. You really have to test to make sure if it works on your chosen theme. You'll also see that, in 2015, the drop-down menu is not triggered by a hover state, so you move your mouse over it. Instead you have to click this button. And, on first sight, this may look strange because you're use to the hover state.

But the reality is more and more people are using their fingers to navigate sites. Either because they have a Windows computer, or because they have a tablet or a smartphone. And in those cases, there is no hover state, so this button actually makes way more sense for triggering drop-down behavior. Once you click on an item, you're taken to that respective page or post. And you can see everything where it's exactly as you would expect from a custom menu. But you'll remember, there are two menu locations in this theme.

And that's for a very specific reason. You have this Social Links menu, which has been added to the theme that allows you to create a custom social media menu within your site. And that custom menu will show up with the social media icons you'll link to, rather than just text. This has become more and more common for themes. So you should always check to see if your theme supports this kind of feature. To use it, all you need to do is create a new menu. Let's call it Social Menu. And then add items, in this case you need to create custom links.

So I'll link to twitter.com. Now, normally I would link to an actual twitter account, but I'm just going to way twitter.com. I'll put in some text. Add to Menu. And then maybe Facebook. And, instagram.com. And linkedin.com. And when I'm done, I'm going to assign this to the Social Links Menu.

Now look at what happens here. Because this is a custom menu that specifically looks for social media links. You get these social media icons, rather than the text that spells that where you're linking to. So this is a really neat feature. But, because I'm not linking away from my site, I have to make sure that for each of my links I toggle Open link in new tab. So that we're actually not leaving the site, but rather opening a new tab.

And that way, I'll make sure my visitors are able to navigate to all my social media outlets, without actually leaving my site in the process. Once I've created my menus and I'm happy with the look of them, I can click Save and Publish. Close the Customizer. And now you see on the front end of my site, I have a custom menu with a drop down. And I also have my custom social media menu, and I click on any of the links, I'm taken directly to that link in a new tab.