I don’t have to tell you how important your site menu is. You know that it’s the first place visitors look (except for maybe your logo) and that it tells them how to get around your website.
That’s why you’re here, trying to learn how to use them. WordPress gives you a ton of control when it comes to creating and organizing menus, but it also gives you a ton of options. And if you want to take full advantage of the power of WordPress, you have to get to know your way around.
Consider this a crash course in WordPress menus. From adding pages and categories to creating dropdowns to setting menu locations–we’re covering it all.
It seems like a simple topic, but there’s a lot to say. This is a long one, so I won’t waste any more time with this intro. Let’s get right to it.
Accessing Your WordPress Menus
From your WordPress dashboard, navigate to Appearance > Menus in the left sidebar menu. This is the WordPress editor. Whether you want to edit an existing menu or create a new one, this is where you’ll go.
Creating New WordPress Menus
Before you can add items to a WordPress menu, you have to create it.
Creating a new WordPress menu is a simple three-step process.
- Click the Create a New Menu link at the top of the page.
- Enter a name for your menu in the box titled Menu Name. This name won’t be visible on the front end of your website. This is just for your reference.
- Click the Create Menu button.
That’s it. Your new menu has been created and you can start adding menu items to it. You can create multiple WordPress menus to use in different locations on your blog or website.
Editing Existing Menus
Editing a Single Menu
If you already have a menu created, it will be visible under Menu Structure and ready to edit.
Editing when you have Multiple Menus
If you have multiple menus created, the menu editor will also have a dropdown. Select the menu that you want to edit from the dropdown and click “Select.” The selected menu will then be displayed under Menu Structure for you to edit.
Add Links to WordPress Menus
Once you’ve created a menu, you can start adding links to it. The left column of the menu editor shows the types of links you can add to your WordPress menu. Click on a pane to expand it.
You can add links to specific pages on your website.
Use the three tabs to search for the pages that you want to add:
- Most Recent — Displays the most recent pages added to your WordPress site
- View All — Displays all the pages on your WordPress site.
- Search — Can’t find the page you’re looking for? Search for it. This is helpful if you have a lot of pages.
Select the checkbox next to the page you want to add. You can select multiple checkboxes to add more than one page at a time or click select all to select every page within that tab.
Click Add to Menu to add the selected pages.
The categories pane looks just like the pages pane, except it displays the post categories used on your site. This is especially useful for blog sites.
Categories has the same three tabs as the pages:
- Most Recent — Displays the most recent categories added to your WordPress site
- View All — Displays all the categories on your WordPress site.
- Search — Can’t find the category you’re looking for? Search for it. This is helpful if you have a lot of pages.
Select the checkbox next to the category you want to add. You can select multiple checkboxes to add more than one category at a time or click select all to select every category within that tab.
Click Add to Menu to add the selected categories.
Adding Custom Links
Custom links allow you to add menu items that point to pages on other websites. You might want to use this if you want to link to an ETSY store or an external blog.
- Paste the URL of the custom link. Make sure it starts with http:// or https:// or the link won’t work.
- Enter the link text that you want to use for the menu item.
- Click Add to Menu to add the custom link to your menu.
Note: When adding custom links to a menu, you’ll most likely want those pages to open in a separate tab so visitors don’t permanently leave your website. To do this, click the Screen Options tab at the top of the page and select the Link Target checkbox. Then, find your custom link under Menu Structure, and click the arrow to see the editing options. Select Open link in a new tab, and then click Save Menu.
Adding Custom Post Types
If you have custom post types on your site, like a portfolio or testimonials, those items will be automatically added to your screen options. You will be able to add links to individual posts (eg, a single testimonial) or to categories and tags associated with those post types.
WordPress does not, by default, provide links to the main archive pages for these post types. (The archive is a page where all of these posts are displayed. It’s like your main blog page.)
Add links to the archive pages for your custom post types with the Post Type Archive Link Plugin. It creates a pane in the menu editor called Post Type Archives that lets you easily add links to the custom post type archive pages.
Adding Posts, Tags, and More
You can add additional menu options using the Screen Options tab at the top of the menu editor. Screen Options lets you choose which menu options are displayed on the screen.
Some options, like posts and tags are hidden by default. This is because it’s unlikely that you would need to add these to your menu.
In the event that you do need to add these to your menu, you can add these options to the screen below. Check the box next to a menu option to display it below. Uncheck the box next to a menu option to remove it from the screen.
Click the Screen Options tab to close this area when you are done.
Rearranging, Editing, and Removing Menu Items
Once you’ve added items to your WordPress menu, those items can be rearranged, edited, and deleted.
Change the Order of Menu Items
If you look at the Menu Structure, you’ll see that the menu items are displayed in the order that you added them. You’ll probably want to rearrange these into an order that makes sense. WordPress menu items are drag and drop, so you can easily adjust the order.
- Hover over a menu item listed under Menu Structure.
- When the mouse cursor changes to look like 4 arrows, click and drag the menu item to the position that you want to place it.
- Release the mouse to drop the menu item in place.
Create Dropdown Menus
The WordPress menu editor makes it easy to create nested menus, or dropdown menus.
Dropdown menus are created by defining a hierarchy relationship within the menu. The hierarchy has two parts: parent and child. Parent items are the top level items that are always visible in a dropdown menu. Child items are the nested items that are only visible by hovering your mouse on a parent item.
Here’s how to create them:
- Go to the menu items listed under Menu Structure.
- Choose a menu item that you want to turn into a nested child item. Hover over that menu item.
- When the mouse cursor changes to look like 4 arrows, click and drag the menu item. Position it below the parent item that you want to nest it under.
- Drag the menu item slightly to the right to “nest” it.
- Release the mouse to drop the menu item in place.
Note: Most WordPress themes support dropdown menus, but it’s important to check your theme after making these changes in case yours doesn’t.
Change the Name of WordPress Menu Items
When you add items to a WordPress menu, WordPress will automatically use the page title or category name. In some cases, you may want to change this. For example, if the title of your page is “About Us,” you can change it to say just “About” in your menu.
To edit the name of a menu item:
- Click the arrow on a menu item.
- Rename the menu item in the box titled Navigation Label. The actual post title or category name will remain visible where it says Original. You can click the original name to preview the link that you’ve added to your menu.
- Click the Save Menu button at the bottom of the page.
Delete WordPress Menu Items
You can remove a link by clicking the arrow on any menu item. Click the red Remove link and the menu item will be deleted from your menu.
Setting Locations for WordPress Menus
Menu locations tell your website where your menus should be displayed.
Most themes have at least one location where menus can appear. However, some themes may have two or three menu locations. For example, my WordPress theme has two menu locations: header menu and footer menu.
You can set the location for your menus in the Menu Settings section when editing a single menu. You can set locations for all of your WordPress menus using the Manage Locations tab.
Note: the names of menu locations can very from theme to theme. For example, the primary menu location could be called main menu, primary menu, or header menu. Location names should be fairly obvious, but if you’re unsure about a specific location, just test it out. Menu locations are easy to change, so there’s no real commitment.
Via the Menu Settings
When editing a single menu, you can set its location using the Menu Settings section.
- Select the menu you want to edit.
- Scroll down to Menu Settings.
- Select the locations where you want your menu to be displayed. You can select more than one location per menu. For example, you may want the same menu to be displayed in your header and your footer.
- Click Save Menu.
Via the Manage Locations Tab
You can set the location for multiple menus at once using the Manage Locations tab.
- Click the Manage Locations tab. This will display all of the locations registered with your theme.
- Use the dropdown next to each location to assign a menu to it.
- Click Save Changes.
Managing WordPress Menus in the Customizer
If you’re a visual person, the customizer lets you edit your WordPress menus and see the changes in real time–before you’ve even hit “save.”
Access this by clicking Manage in Customizer at the top of the menu editor. It will take you to a front end view of your website with a side panel that lets you make menu edits.
The customizer features most of the same options as the traditional menu editor, just presented differently. If you’re interested in learning more about how to manage your WordPress menus using the customizer, check back soon for a detailed tutorial!