Working with Custom Menus in WordPress

Getting Started

First, I'm going to navigate to my Sidebar Menu, and under Appearance, I'll hover and click on Menus.

Let's create a new menu. I'm going to do this to show you the different choices available. I'm going to create a new menu, and I'm going to type in the menu name. This menu name is for you—you can call it anything you want. I like to call mine something specific related to the menu's intended purpose. I'm going to click Create Menu.

You may have multiple menus on your site in different menu locations.

What you would assume to be the case, that you could add pages to the menu, is true—but that's only one of the things that we have the choice of doing.

I can go to all of my pages and bring them in. And I can pick View All to see all of my pages. And I can do a search to find the pages that I'm looking for if I have a lot of them. However, all I need to do is select the ones that I want and click Add to Menu (the giant button).

Not only does it add it to the menu, but you'll notice it tells me the type of menu choice selected.

One of the reasons I like custom menus is that it gives you a lot of different choices. For example, you might your posts to set up different products that you have available—and this allows you to update on the fly. So you could add categories to your navigation structure. We have posts under Islands and under Maui. I have Things to Do. I could select those and add them to the menu—but before I do this, I want you to catch this: this is a parent/child relationship. However, when I add this in—that parent/child relationship is lost. It's very easy to recreate it—and I could even do this with things that weren't naturally parent/child related before.

If I want to make Maui under Islands again—I'm going to use my move tool and drag it slightly to the right. Notice the indent. It's telling me that this is a sub-item of what's right here.

In addition to this, I also could put an individual post here. So, if I had an event post, I could select it and add it in as well.

I also can include custom links. You're going to see an issue in a moment. Make sure you're following along in the video. If I put a link in here, then put some text in, I can add that to my menu as well. And again—it's here at the end because I just added it, but I could move it anywhere that I want it within my structure. That's one of the beauties of the custom menu—you can order it by drag and drop.

If I go in here, though—one of the problems that I'll have is when you click on this link, you're going to leave my website. I don't want that to happen. So, I'm going to go to the top. There's a tab called Screen Options. And under Show advanced menu properties, I'm going to choose a Link Target. That allows me to now have, when someone clicks on this link, their website open up in a new tab or window. That way, they don't lose the website. When they're done browsing there, they can come back and continue from the point they were with my website previously.

I'm going to save that.

I could keep adding and making changes to this and keep saving it. When I'm ready to have it show up on the site, I have to pick a Display location. As I said earlier, some themes have multiple menu areas. So, notice this one has three different ones: a primary one, a footer one, and a special one for social media links. I'm going to choose Primary and save that menu.

Now, if I go back and refresh—there's my menu. Notice, there's the parent/child relationship—which shows up as a dropdown menu. That's how we create custom menus inside WordPress.

Want to Truly Understand WordPress?

Take WordPress to the next level and create engaging and responsive websites. The deeper your understanding, the greater your results. We offer the best web development training in NYC and rigorous web design courses. Scheduling is flexible, so start growing your career today!

• NYC web development courses
• NYC web design courses
• NYC graphic design courses
• NYC Photoshop courses