Design

Custom Menus

Custom Menus are a list of common links that are usually displayed as the main navigation for your site. The menu location can vary depending on your theme, and some themes offer additional menus such as social links menus.

Table of Contents

Create a Custom Menu
Add Menu Items
Menu Display Location
Automatically Add Pages to your Menu
Reorder Menu Items & Add Drop-Down Menus
Delete Menu Items
Customize the Menu Item Text
Save your Changes
Frequently Asked Questions
Custom Menus in WP Admin
Advanced Menu Settings in WP Admin

Watch the video below for a quick overview or read below for more detail.

Custom Menus - Drop Down
A custom drop-down menu using the Twenty Seventeen theme

Create a Custom Menu

  1. Click My Site(s), then Customize.
  2. In the Customizer, click the Menus tab.
  3. If your theme already has a default/primary menu, you can click on it to begin editing.
Custom Menus - Menu Locations
In this example, click on Primary to add items to your menu.
Custom Menus - Customizer
  • If your theme does not already have a default or primary menu click Create New Menu
  • Give your menu a name
  • Select where you want the menu to appear (your options will depend on your theme)
  • Click Next to begin adding items to your new menu

The Menu Locations available in the Twenty Seventeen theme are the Top Menu and the Social Links Menu.

The Social Links menu styles menu items as social icons. In this case we want the Top Menu.

Custom Menus - Create New Menu
Create a new menu
Custom Menu - New Menu Details
Name the menu and select its location

↑ Table of Contents ↑

Add Menu Items

In addition to pages you have already published, you can add several different types of menu items to your custom menu:

  • Custom Link – Adds a custom URL linking to another site.
  • Pages – Adds a link to another page on your site.
  • Posts – links directly to a blog post on your site.
  • Testimonials – links to testimonials.
  • Projects – links to a page of your portfolio projects.
  • Categories – Shows a feed of blog posts from a given category.
  • Tags – Shows a feed of blog posts from a given tag.
  • Project Types – links to specific portfolio project types.
  • Project Tags – links to specific portfolio project tags.

To add one of these menu items:

  1. Click the + Add Items button.
  2. Choose a menu item type from the list. For example: Pages.
  3. Select one of the options displayed for that type. For example, click + Home to add a link to your home page to the menu.
  4. Add more items to your Custom Menu by clicking the plus next to each item.
Custom Menu - Add Items

If you wish to add a brand new page or post to your menu, you can add its title in the field for Add New Page or Add New Post. A blank page/post will be added to your site and automatically added to your menu.

You can then add content to the page or post through your Site Pages/Posts


↑ Table of Contents ↑

If you want this menu to display on your site, select a Menu Location. For the main navigation, the correct setting depends on your theme. Often it is listed as Primary, Header, or Top.

If your theme offers a Social Links Menu, it will automatically convert menu items to corresponding icons for popular social media sites.You can read how to set that up here.

Custom Menus - Menu Locations

↑ Table of Contents ↑

Automatically Add Pages to your Menu

Under Menu Options, check the “Automatically add new top-level pages to this menu” if you want newly created pages to automatically be added to the menu.

Custom Menus - Menu Options

If you leave this option unchecked, you will want to remember to edit your custom menu to add new pages to your navigation.


↑ Table of Contents ↑

Reorder Menu Items & Add Drop-Down Menus

To re-order the items on your menu, move a menu item by clicking the Reorder link:

  1. Click on the Reorder link.
  2. Click the up or down arrows to move a menu item up and down in the menu.
  3. Click the right and left arrows to nest or un-nest pages under other pages.

Nesting a page creates a sub-menu or drop-down menu.

You can also drag and drop a menu item into location without clicking the Reorder link first.

Custom Menus - Reorder

↑ Table of Contents ↑

Delete Menu Items

You can remove menu items by clicking on them in the settings on the left. When you do, they will expand and reveal a Remove button. Click that to remove the menu item.

Custom Menus - Deleting a Menu Item
Click the drop down next to a menu item to expose the Remove link to delete a specific item.

↑ Table of Contents ↑

Customize the Menu Item Text

You can change the name of the menu item as it appears on your site by editing the navigation label. To do so, click on the item in the settings on the left side of the Customizer. It will expand and show a field for Navigation Label.

Here, enter the text as you want this menu item to appear on your site.

Custom Menus - Rename Menu Item

↑ Table of Contents ↑

Save your Changes

  • Once you have organized your menu, be sure to click the Publish button to save your custom menu.

↑ Table of Contents ↑

Frequently Asked Questions

The type of menu item I want is unsupported, what should I do?

If you get a warning saying that your item type is unsupported, or you can’t see your desired type in the types list, you can still edit these types at WP Admin → Menus. Currently, some Post formats are not supported in the new menu page but are still supported in WP Admin.

It’s showing a Menu but when I go on my site the menu is not there, how do I fix it?

If your theme isn’t showing your default menu, try making any change to the menu and re-save — this should force the theme to use that menu.

Where is the feature X that was there before?

If you want advanced features, such as adding menu item descriptions, CSS classes, changing a link’s target or title attributes — please use WP Admin → Menus.

How do I create an un-clickable parent tab for my sub-menu

To create a menu item that is not clickable but will contain sub-menu items, add a Custom Link menu item and add the # symbol in  the URL field.

 

menu09

 


Next page: Custom Menus in WP Admin

Pages: 1 2 3 View All

Not quite what you're looking for?

Get Help