Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Before we start working on the menu itself, let me show you how the menu is implemented out of the box. First, I'm going to go to the WordPress toolbar and select Menus, and this takes me to Appearance and Menus. And here I'm going to click on Manage Locations. And here you see, in the theme, we have one menu location called Primary Menu. The menu itself is implemented from functions.PHP, so if we go to functions.php, you'll remember from earlier in the course, that the primary menu was defined here under register_nav_menus.
And here we have Primary Menu. Once the menu has been defined by functions.php, it has to be displayed somewhere within the template and that somewhere is in header.php. So if you scroll down into header.php and go past the header section, that shows the image and the title and description that we worked on in the previous chapter. We get to the nav section, and within the nav section, you will see right here at the bottom, we have wp_nav_menu, theme_location, primary. So this is the function that calls in the menu itself.
The anchor is wrapped around some text that says, Skip to Content, and this is a link that will only appear if you use a screen reader or if you use a text-to-speech browser. In those cases, when the person browsing the site gets to this link, they can choose to pass the menu and go straight to the content because if you have a large menu, like we do now, having to go through the entire menu can be really annoying if you're just looking for the content. Now, this Skip Link link is hidden using the Screen Reader Text class, and you'll see later on the course, we'll use this class to hide other elements as well.
Now that you know how the menu has been implemented into our theme and where the menu appears within our templates, we're ready to start working on the output of the menu and make it look the way it does in our design.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.