The WordPress menu can be a huge source of frustration, especially for beginners. Before I became a web developer, I wanted to throw my laptop out the window more times than I’d like to admit because I just couldn’t figure out where to edit things. Luckily, you don’t have to go to an entire WordPress boot camp course to learn how to build a menu in WordPress, because I’m going to help you with it right now.
How menus work in WordPress.
WordPress menus are somewhat intuitive, but there are definitely key pieces that are not at all intuitive and that I probably would have never found on my own.
There are basically three parts, which is why I was so confused: Setting up the menu, then setting the location of the menu, and then styling the menu. Essentially, you are going to build the menu first, and then you have to tell WordPress where you want it to display that menu. Then, you have to go to a different section to tell WordPress what colors & fonts & styling to use on your menu. I know!
Before I realized this, I would go around in circles, not able to understand why it really looked like my menu was set up properly, but the one that was displaying on the home page was all wrong. It was because I had a totally different menu set to show up there! D’oh!
How to build a menu in WordPress:
This part is done in your WordPress admin dashboard, in Appearance > Menus. If you’re not sure how to get there, this blog post about where to log in might be helpful.
To get started, you might have to create a new menu. If you do, I would suggest giving it the name ‘Primary Menu’ if you plan to use it as your main header menu. That’s how WordPress refers to those menus, so it’s just easier to give it the same name.
On the left, you’ll see all of your pages and posts. To add them to your menu, just check the box next to the page or post you want on the menu, and then click ‘add to menu.’ Once items have been added to the menu, on the right, you can just drag and drop them to rearrange them. If you want an item to be nested underneath another item, drag it so that it’s indented under the other one.
Once you have the structure of your menu set up with the order and nested items, then you might want to edit some of the names of the pages. Page names are super important for SEO, so what you named a page might not be exactly what you want to have in your menu. To edit what shows up in the menu, click the down arrow to the right of the menu item. A box will open up where you can edit the name. I try to make sure everything is consistent here with regard to capitalization, too, because that will also show up on your menu.
Pro tips for building menus in WordPress:
If a page or post isn’t showing up on the left, try switching from the ‘most recent’ to the ‘view all’ tab at the top left. Still not showing up? Double check that the page or post is actually published! You can’t add draft items to the menu. Believe, me, I’ve tried many times!
If you want to nest items under a topic but you don’t have a page for that topic, don’t worry, there’s a hack for that. Let’s say you have 3 books that you’ve written, and you want to have a page for each. But you don’t want to make a separate page for ‘books,’ because you’ve already put that same content on your home page. Never fear!
You don’t have to make a whole page just to nest items. Instead, create a custom link on the left side of the page. Give it a URL of #. Put only the hashtag (pound symbol!) in that box. That’s basically a null URL that will just keep the visitor on the same page. Then, you can add that custom link to the menu and nest the other pages underneath it. Voila!
How to set the location:
This can be tricky, and it was definitely something I didn’t know about until I became a WordPress developer. You can have multiple menus on your website. Some themes have space for 2-3 menus, and others can have way more. If you’re using Divi, you can basically create unlimited menus. You just have to set the location to tell WordPress which menu to put where.
On that same menu page, you’ll see ‘edit menus’ and ‘locations’ tabs towards the top. Click to tab over to the locations tab. Here, you’ll see how many set locations your theme has. Set the primary menu to the menu you just created (ah, now the name makes sense, right?!), and voila! Your new menu should now show up at the top of your website. Remember, you can always come back to the menu page and reorganize your menu. And if you’re using Divi, you can add as many menus as you want to different places on your site (I’ll show you how farther down the page!).
How to style your menu:
Okay, now you have your menu set up and you set the location so that WordPress will pull it to the correct place on your site. YAY! Now it’s time for the fun part, the styling! This part is all done in Appearance > Customize. Under Header & Navigation > Primary Menu Bar, you can change the height, fonts, colors, add or remove your logo, etc. Play around with it until it looks the way you want it to look. These settings are for how your menu looks when people first arrive on your page.
If you’re using Divi, make sure to also set the Header & Navigation > Fixed Menu Settings. This is what your menu looks like when people are scrolling down the page. Usually, the menu changes to have a smaller height so it will leave more space for the page content.
Working with WordPress menus in Divi:
In Divi, you can add as many menus as you like. Divi has its own menu module. By using that module, you can add a menu anywhere you’d like on a page. I often use this for adding menus to the footer or for having a sort of ‘mini menu’ along the side of the content. If you’re going for a website with a different look or you want to improve your UX by having easier access to common links, using a Divi menu module is a great way to go. Set up your menu the same way you would a Primary Menu, but give it a different name. Then, just choose that menu when you add your Divi menu module. You can style this menu right in the Divi module, as well. Read this article for more on how to use menus in Divi.
