The Complete Guide to WordPress Menus

The Complete Guide to WordPress Menus // Everything you need to know about WordPress menus--from creating your first WordPress menu to adding pages and categories to making dropdown menus. Whether you're a WordPress newbie or you've been around the block, you can learn a thing or two from this in-depth tutorial. Pin for later!

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.

WordPress Menu Editor

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.

Create a new WordPress menu

  1. Click the Create a New Menu link at the top of the page.
  2. 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.
  3. 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 a single WordPress menu

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.

Editing when you have multiple WordPress menus

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.

Adding Pages

You can add links to specific pages on your website.

Add pages to WordPress menus

Use the three tabs to search for the pages that you want to add:

  1. Most Recent — Displays the most recent pages added to your WordPress site
  2. View All — Displays all the pages on your WordPress site.
  3. 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.

Adding Categories

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.

Add categories to WordPress menus

Categories has the same three tabs as the pages:

  1. Most Recent — Displays the most recent categories added to your WordPress site
  2. View All — Displays all the categories on your WordPress site.
  3. 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.

Add custom links to WordPress menus

  1. Paste the URL of the custom link. Make sure it starts with http:// or https:// or the link won’t work.
  2. Enter the link text that you want to use for the menu item.
  3. 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.

WordPress custom post type archive links

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.

WordPress screen options

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.

  1. Hover over a menu item listed under Menu Structure.
  2. 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.
  3. 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.

WordPress dropdown menus

Here’s how to create them:

  1. Go to the menu items listed under Menu Structure.
  2. Choose a menu item that you want to turn into a nested child item. Hover over that menu item.
  3. 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.
  4. Drag the menu item slightly to the right to “nest” it.
  5. 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.

Change the name of WordPress menu items

To edit the name of a menu item:

  1. Click the arrow on a menu item.
  2. 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.
  3. 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.

Delete a WordPress menu item

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.

WordPress menu settings

  1. Select the menu you want to edit.
  2. Scroll down to Menu Settings.
  3. 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.
  4. Click Save Menu.

Via the Manage Locations Tab

You can set the location for multiple menus at once using the Manage Locations tab.

Manage WordPress menu locations

  1. Click the Manage Locations tab. This will display all of the locations registered with your theme.
  2. Use the dropdown next to each location to assign a menu to it.
  3. 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.

WordPress menu customizer

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!

 

 

Confused by WordPress menus? Share in the comments below so I can help!

Leave a Comment

  1. April 28, 2016 at 5:38 pm

    Thank you, very full tutorial. I have successfully applied for my blog

  2. May 3, 2016 at 9:54 am

    It’s great to see WordPress help in terms the average person can understand. Thank you so much!!

  3. May 4, 2016 at 12:12 pm

    Thank you for saying that, Cristina! There are so many tutorials that get really jargony and are hard to understand unless you REALLY know WordPress. I try to take a WordPress in plain English approach, and I’m so glad you found it helpful!

  4. May 3, 2016 at 10:59 am

    Super helpful. Thanks!

  5. May 4, 2016 at 12:13 pm

    You’re welcome, Jessica! I’m glad you stopped by. 🙂

  6. July 24, 2016 at 2:26 pm

    You saved me!! I get so lost and overwhelmed, so THANK YOU for this post, seriously!

  7. August 31, 2016 at 12:56 pm

    Thanks for visiting, Naomi. So glad you found this post helpful!

  8. July 17, 2017 at 3:58 pm

    Hi Amanda!
    I’ve been following this post and I’ve managed to update my pages. But when I set the category for the post, it doesn’t show up under that category on the menu. I think its a permalink issue?

  9. August 14, 2017 at 3:48 pm

    Hi, Meaghan! Can you show me an example of a post where this is happening?

  10. August 10, 2017 at 3:56 am

    Thank you so much! This was helpful but i cant seem to figure out why when i click on the menu itself, that page appears empty even though i added posts under it.

  11. August 14, 2017 at 3:52 pm

    Hi, Tanvi! Did you get this figured out? I just visited your blog and found a few posts in your menu.

  12. Abigail
    August 14, 2017 at 12:43 pm

    Hello, thank you so much for this article. How would I go about centering the main header menu in my twenty sixteen child theme?

  13. August 14, 2017 at 3:51 pm

    Hi, Abigail! You’ll need to add some custom CSS to your blog in order to do this. Can you send me a link?

  14. August 14, 2017 at 4:54 pm

    Hi Amanda. I included my website link this time. Hoping to center the main menu. Also, if you could help me figure out the CSS needed to change the font of the post title link, I would be so grateful! I have looked through the original theme several times now to find the correct place to change this and have come up empty. You will notice that once you click on the link, the post title is in the correct font. However on the home page, the clickable post title is not in the ‘gentium basic’ font. Thank you so much!

  15. August 26, 2017 at 9:48 am

    Bless you for this post! This is exactly what I was looking for! I just wish I had found it earlier 😀

  16. February 16, 2018 at 11:53 pm

    Thank you for shearing this great tips, I love this

  17. April 10, 2018 at 8:11 am

    Thank you for your insight! As someone just getting started I’ve been looking for some help with my WordPress account. Very Helpful!