From the course: WordPress: Building Child Themes

Add a menu - WordPress Tutorial

From the course: WordPress: Building Child Themes

Start my 1-month free trial

Add a menu

“

- [Instructor] Now that we've found the functionality in our parent theme, let's copy out these lines of code and then paste them into our child theme's functions.php file. So I'll copy this whole register_nav_menus section. I'll open up our child theme, open up functions.php. Let's scroll down to the bottom. Let's put it in remove_parent_functionality, which we'll rename in a moment. I'll paste this in. And I'm choosing this function because it's firing at the right time, after theme setup. Let's go ahead and change the parameters of this menu. We only want to add one new thing. We don't want to add a primary menu, a footer menu and a social links menu, so let's delete these. And we already have a Primary menu, so let's call this Secondary. And we need to have a unique identifier, so we'll just call it menu-2. And let's change this comment. And now let's go ahead and change this function, because we're no longer just removing functionality, we're completely modifying it, twentynineteen_child_theme_setup. And when we change the function name, we need to make sure that we're calling the new function, so remove_parent_functionality no longer exists. Let's paste the new name in there. Save this and reload the page. Of course, nothing happens. However, if I go to Menus, and View All Locations, we can now see there is a new Secondary menu, which wasn't there before. If I add a menu to Secondary, let's go ahead and set our Main menu to Secondary, and click Publish, WordPress knows there's a menu, but the theme doesn't know where to display that menu. The next step is to figure out where to place that menu. Let's go back to our code editor. We can open up twentynineteen, template-parts, header, and then site-branding. And here we can see how we display that menu. So we can see if there is a menu in menu-1, then print all of this information. We can use this code and just augment it slightly to output our new menu. But first we need a file to place this in. And actually, we want to place our new menu right beneath the existing menu, and we happen to be in a template file, so let's copy this exact template file over to our theme and then modify it. So I'll copy site-branding. I'll go to our theme, template-parts. I'll add a new folder called header, and I'll paste it in header. So here's our new site-branding. I'll close the old one. And now we just need to make some small changes. Let's go ahead and copy this entire section right here. So all the way from if to endif. I'll paste it in. So right now, we're double printing menu-1. Let's go ahead and change menu-1 to menu-2, which is the menu we just added. Let's remove this id="site-navigation" since each HTML element should have a unique ID, so we'll just delete that, and then I want to do some quick CSS experimentation. So I'm actually going to write, at the end of this nav HTML element, style="font-size:0.7em;". So I basically want to say, "Print the menu, but just make it a little bit smaller." Let's go back to our front end, and I'll exit the customizer. Let's refresh the page. And here it is. We now have a secondary menu right beneath the primary menu, and it's a slightly smaller font size. Of course, now would be a great time to actually make this menu unique. Let's go ahead and do that super quick, Customize, Menus. It's a New Menu. We'll call it Secondary. And we'll add it to Secondary. And this secondary menu should just have Contact and About. And we'll go to our primary menu and remove those. And we'll also remove this recipe while we're at it. And now that we know that everything is working, let's move that temporary CSS into our actual CSS file. Go back to the code editor. I'll open up style.css. We'll scroll all the way to the bottom. I'm going to go back to site-branding and copy out the style. And I'm going to say, .main-navigation, which affects both the primary menu and the secondary menu, followed by another .main-navigation, and now this only affects the secondary menu. Font size 0.7em. We'll save both of those files, go the the front end, refresh, and there we go. You can spend a lot more time customizing the look of this menu to make it more look like a secondary or less important menu. But with some basic functionality, we copied a menu and added it to our theme.

Contents