WordPress allows for easy creation and management of menus, both for developers and users. Discover how to add new menus to a custom WordPress theme and configure them to match your designs in this video tutorial.
- [Narrator] The one item in the header we have yet to work with is the menu, and that's because the menus are a special component in WordPress and deserves special attention. So in this chapter we'll focus squarely on the header menu. I'll show you how to set it up, make it work, and make it accessible. In WordPress, menus are managed from the customizer. So if we go to the customizer you can go to the menu section. Here you gain access to all the menu locations and your themes. So right now there's one location it's called primary. This is what you see here. If no menu has been assigned to the primary location what you end up seeing is a list of all the available pages on the site in alphabetical order.
You can then choose to change to any other menu for example the short menu here, and we get a much shorter menu with less items. Or maybe the testing menu, which has a lot more items. You can also customize each of the menus. Here you see there's a section of menus already defined. You can go into each of them, edit either the menu items themselves, reorganize them by simply dragging and dropping them around within the menu, or add or remove menu items. If this is the first time you're seeing menu management in the WordPress customizer, go check out WordPress essential training where this is broken down in great detail so you get to learn how to manage the menus before we start working with them in the theme.
A menu like the one you see in the header requires two components. First of all it has to be registered in the back end of WordPress as a menu that can be customized in the customizer. Then, it has to be added into the themes so it can be displayed. This is done using two different functions. First, register_nav_menus which registers the menu into WordPress so WordPress knows it's available and adds it to the customizer as a location. Second, wp_nav_menu is the function that's used to display the menu on the front end. A wp_nav_menu has a ton of parameters you can use to customize the output of the menu.
We're not going to use many of these here but know that they're there and know that you can customize the menu in many different ways. If you go through this list, you'll see there's a lot of functionality. Normally you don't actually need any of this because the defaults are pretty good, but there are certain circumstances where you may need to change the output of a menu. In that case, there's probably going to be some parameter you can use to get exactly the output you want. Let's take a look at how the menus are wired up in underscores. We start in functions.php, and here you'll remember I mentioned when we walked through this file originally, that the menus are registered.
Down here on line 46, we have the function register_nav_menu and right now it's registering a single menu, primary, with the human readable name, 'Primary'. This can be translated using the text domain. Registering a menu like this does not mean the menu shows up in the theme. All it means is we can now populate the menu from the customizer, and then tell the theme where to display it. If I want to add additional menu locations, I simply copy this line and give it a new name, let's say 'Secondary'. Save functions.php, back in the browser and go back to customizer.
Go to menus, and your locations, and here we have the secondary menu. You can also change the names of these menus to anything you want. Maybe you want primary menu to be called header menu, makes a lot more sense since it's in the header. In that case, simply go back and change the name, change it to header. I'm also going to take out the secondary because we don't need it right now. Now when I reload the page, to menus and menu locations we have a single location that is in the header. Once a menu is registered we also need to display it somewhere within the theme, and here you can place it anywhere you want.
I've seen many use in the headers, footers, sidebars pretty much anywhere. You have to remember menus are not necessarily what you think of as menus. You can also use menus as lists because they're an easy way of managing lists and orders. In underscores, the only menu is displayed in the header. You can scroll down and find it at the bottom here, inside the nav. Here we call the menu using the theme locations, so here we have wp_nav_menu. We set up an array of parameters, and the two parameters that are being used are theme_location which points at primary, that is the name of the menu right here, and then menu_id which is the ID that's appendant to the div that wraps around the entire menu element.
In the browser we can look at the output of the menu. I'll right click on any menu item and then break out the developer tools, we can see how this works. Here we start with a nav=id site-navigation class: main-navigation. Inside this nav we have a button, this button is what appears when we reduce the width of the screen. So if I reduce the width of the screen here to small enough you'll see the menu is replaced by this button, and that's the button you're seeing in the markup right here. Then we have the div that wraps around the menu, here you see the ID, primary-menu.
That's this ID that was defined right here, menu_id primary-menu. The menu itself is an unordered list where each of the menu items is a list item with a link inside. For drop down menus, you'll see that the list item has an appended class, page_item_has_children, and you'll see when you open that one in addition to the link that is the current menu item, you also have another unordered list. Inside it, this one has the class children and again we have list items with links inside them. WordPress does a really good job at appending class names to menu items so that it's easy to target individual situations.
As you can see if you want to style just drop down items, you simply target the children class. If you want to style items that have drop down elements, you can target page_item_has_children, or menu_item_has_children. If you navigate to an individual page, or post, or other item that is listed in the menu, that will be marked with a class name. Here you can see I navigated to about the tests, and the list item for about the tests now has an additional class, current_page_item. If you navigate to a page that is in a drop down, the parents of that drop down will get a new class, indicating that it is its ancestor.
All of this is to say, if you want to you can stall your menus down to and incredibly detailed level of specificity. However, I tend to air on the side of passion here and only apply sparse styling to the menu. That's just my personal preference. You should style the menus the way you want to, and I'm telling you there are so many classes to hook into here, that you can pretty much create a custom menu that accounts for every single scenario that you can come up with. Now that you know how menus are registered and hooked into the theme, let's look at how we can style and add functionality to the menu to make it accessible, responsive, and look the way we want to.
- Setting up a WordPress development environment
- Getting and installing _s
- Automating theme development with Gulp
- The WordPress template hierarchy
- Setting up the basic theme
- Registering and displaying menus
- Applying styles to menus
- Creating conditional layouts
- Working with the comments template
- Working with featured images
- Working with widget areas, or sidebars
- Working with index templates
- Working with static pages
- Adding features to the Customizer