Navigate your way around your website with the aid of the navigation block. This tutorial will walk a user through how to create a menu with the navigation block in the site editor of updated 6.4. The tutorial will use the 2024 theme. It will also touch on moving menu items, creating a second menu, adding a button and a sub-menu.

Learning outcomes

1. Adding pages to a current navigation
2. Setting up a new navigation menu
3. How to move navigation items to different locations
4. How to create a second navigation menu to use in a second location such as the footer or sidebar.

Transcript

0:00

0:00
Hello everyone, welcome to a tutorial about how to create a menu using the navigation block. I’m using local to create a demo website using the 2024 default theme. At the time of this recording, I’m using WordPress version 6.4. The objectives of this tutorial are to learn the different blocks that can be used within the navigation block to have the user feel more at ease when creating a website’s navigation menu to increase awareness of UX UI design principles, and accessibility, and how these things make navigating a website easier to use. Here is a description of the items I will be covering, adding pages to a current navigation, setting up a new navigation menu, how to move navigation items to different locations, how to create a second navigation menu to use any second location, such as the footer, or sidebar, adding pages to a current navigation, we’re going to start at the dashboard. And we’ll go down to the appearances. And you’ll see that the editor is there. We’ll click on that. And it’s going to bring us into our design section. The design section has a series of different areas that we can focus on, we’re going to add pages. So we’re going to go to our pages tab, we have a couple of defaults already there on the front end, as you see over in the preview, we only are showing the sample page, we’re going to click on the plus sign at the top and we’re going to add an actual homepage. This gives us the editor for that homepage. If you look on the right side, you’ll see that the status is still in draft when things are in draft, then they won’t show up on the front end, we need to click on the draft. And it’ll give you a series of different options. We’re gonna click on the published and then go back up to the top and hit save. Hit Save again, for the homepage. Now that we see the status is published, we’re gonna go back and click on the Open navigation, we’re gonna go back to our pages, or we’re gonna add one more page where you click an ad and about page, we’re gonna create the draft, we’re gonna go over to our status, change it to published, go back up to the top it save it save for the about page. Now you can see that we have the three different pages there. If we go up to our front end, and I’m going to refresh it, we can see that we have our sample page. And then the two that we added how to move navigation items to different locations. If we go back to the dashboard, and look at the front end, we have our menu items, kind of not in the right place. So we usually like to have the home as the as the first one, what we’re going to do is we’re going to go into the dashboard and go to appearance, go to editor, we’ll go into the navigation, because we just want to focus on those three things right there, click on the Edit button, and you see that we have that I’m going to make this a little bit bigger if I can and zoomed in. Okay, if you look on the right side, we have page list and then the list of claims there. What we want to do is we want to click on here, and it’s going to give us a toolbar that says to edit, okay, and if we look over here, the page list, there is a area that says edit this menu. This page list is synced with the published pages on your site, detach the page list to add, delete or reorder the pages, what’s going to happen is that we’re going to see the page list block is going to disappear, we’re just going to have our list of menu items, where you click on Edit, and a window pops up to kind of restate that, we’re going to detach those menu items from the page lists block detach. Now if we look at the list view, under navigation, there is no page list anymore, we can take these and if we click on home, we have some tools that give us this so that we move right move left the little arrows will give us an easy way to do that. And then if we click on the About, we can move back to the backside if we want to do that. That’s an easy way. The other way is if we go into the list view, click on that and we can just bring it down. There we go. If we look over here, the homepage is over there. So there’s a couple different ways. This is probably the easiest way because the toolbar is right there. And we can set that back up. Just make sure that you click on Save to finish because it will then update the navigation. You’re done with that part. Setting up a new navigation menu. We’ll go into the navigation and we’ll click on the little pencil icon which is the edit what we’re going to do is we’re going to add our pages from here We’re going to do a homepage and we’ll create a draft or add another one, we’ll create an about page and create a draft. And then for our third one, we’re actually going to add a new feature, which is a button with a Contact option, we’ll create the draft page for the contact. And what we can do is, we’ll click on that again, and the toolbar that comes up over on the side, let me increase the size there, we’re gonna go to the toolbar and click on that first icon that looks like a little paper, we can transform it into different options. So we do have the option of other buttons. So we’re gonna click on that. We’ve created a contact button. We’re gonna go over and save. Now, remember that two of our pages are still in draft, if we go to the front of our site, and we refresh, we do have the contact button, but we don’t have our other two pages, a way that we can do that is to go into our dashboard, and we can go into pages, click all pages, you can see that we have all of the items that we inputted: our about, our contact, our home. We go into edit the page. We’re going to the publish button up at the top, Okay. We can go back and now you see that the draft is off. We’ll do that again with our contact. Publish that. Then we will go into the home, edit and publish. We should be able to go to the front end of our site, refresh the page, and we have a multiple of things. Why is this?Because of the fact that we still have the page view block. What we’re going to do is we’re going to go into our editor, because of the fact that we had added those pages from over here. We’re gonna go into the navigation, you see that we have the page list, and then we have these items here too. That’s what it is. Because if we click here, we have all of those other pages, we’re gonna go into our navigation. We’re going to click here, and we’re just going to delete this page list. We’ll click on the three dots, scroll down to the bottom of that drop down menu to delete the page list. Now you can see our menu has the home the route and a button, you can hit Save can go back to the front end, we have our three menu items, our homepage, our about page and our contact but how to create a second navigation menu to use in a second location such as a footer, we’re going to look at the footer, or in our dashboard, and we’ll scroll down to appearance. Go over to the editor, we will go into the navigation. At the top you’ll see the three dots called action. Click on that, we’re going to duplicate our navigation menu for right now, this gives us a navigation copy, we can go to the three dots again, which are actioned. We can do a rename a window pops up called rename backspace, we’re going to name it the footer menu, this can be a menu that might not have all the options, it might have different options of different pages, or it might just be in a different order as opposed to your main navigation. We’ve created the footer menu, and we’re going to edit this. What I want to do is I want to take out the contact button and I want to add a blog page and then click on the contact and click on the three dots in our toolbar. We’re gonna just delete that, yeah, we might have to do something else here because the button is still there, they have to remove the button. All right, we have the home about and I want to add a blog, I can click on the plus sign. I can type it in or I can see that the first page that’s listed is the blog. So I can click on that. And then hit Save, Save again, it’s going to save it to the footer menu under navigation then used double check on that. And we can see up here that we have the footer menu there, then how do we use it, we can go back into our navigation. Go into our templates and go into the blog home. We’re going to edit this and if we click on the list view, we see that there’s a footer already. We want to add that navigation menu there. This has an extra block down here with just a paragraph. So we’re going to add it in there. I’m going to click on the three dots of that group. I’m going to open up that group and I’m going to click on the three dots. So that paragraph that’s already there an ad before. What I can do is then click I’m going to backspace click navigation and add a navigation to it Okay, but actually found that the right template, believe it or not, for the footer, and it did it automatically. So the home about blog, if we scroll on to the right side, where the block information is we have navigation, we have a menu and there’s three dots over here with that menu. If we click on that, we can see the different menu options. So we could actually put the navigation menu with the contact button, or we can go back and click on the footer menu. That’s how you would use a second menu in a

10:35
second place. Another new feature of 6.4 is sub menus. Start at our dashboard, go to Appearance, go over to Editor, click on navigation and go to the main navigation I’ve set up a third page called seasons. We’re going to click on the pencil to edit that now if we hover over and click on that, we can see in our toolbar, some different tools, and one of the tools is add a sub menu up here, what I’m going to do is I’m going to click down here and make a custom link I’m going to right fall and I’m just going to click on the submit button here. I’m going to add another and this time I’m going to add a page. So I’ve already made a page called Spring. We’ll click there click away from there, we can see on our drop down we have fall and spring. I’m going to go over to save and then save again for the navigation. If we look over at our navigation block, we can see what’s listed and we see that it there’s a custom link called fall and a page called Spring. If we go to the front of it and I refresh that page, we see that our seasons if we hover over we have the drop down fall and spring just a few of the new features to the navigation to help you make it a little bit easier. Okay. To view more tutorials, lesson plans and workshops please visit learn that WordPress