Appearance

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.

Watch the video below for a quick overview of how a custom menu works, and read below for more examples and settings.

Customized main navigation menu in the Twenty Thirteen theme

To add your first custom menu, follow these steps:

1. Create a Custom Menu

Go to your My Sites, and click on Menus to create your first custom menu. By default the Primary Menu area for your theme is selected for you, and Default Menu has been started.

To change the name of your Default Menu, click on the pencil icon and give it a new name like “Main Menu.”

Screen Shot 2015-04-22 at 6.38.34 PM

↑ Table of Contents ↑

2. Organize your menu

If you have any pages already published on your site, those pages will be listed for you in your first menu. You can also add any additional pages and links you’d like.

Note: Before a new page can be added to your menu, you must first create and publish it.

To re-order your menu, move a menu item by dragging-and-dropping, or by updating the settings within the item you’d like to move:

  1. Click on the pencil icon next to it.
  2. In the menu item details, click on the Move button.
  3. Click the Move here link closest to where you want to move the item.
  4. Select Move Item Above or Move Item Below.

 

Moving menu items

 

You can also add a drop-down to your menu using the drag-and-drop feature.

  1. Add the link to your menu that will appear in a drop-down list.
  2. Drag it and drop it directly beneath the main menu item you want it to be found under.
  3. Drag it again, this time to the right, so it indents beneath the main menu item, and drop it there.

Drag and drop

 

↑ Table of Contents ↑

3. Save your menu

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


↑ Table of Contents ↑

Additional menu items

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

  • Page – Adds a link to another page on your site.
  • Link – Adds a custom URL linking to another site.
  • Category – Shows a feed of blog posts from a given category.
  • Tag – Shows a feed of blog posts from a given tag.
  • Post – links directly to a blog post on your site.

menus-v1-new-item

To add one of these menu items:

  • Click on the + icon next to an existing item and choose whether the new item should go above or below it. (You can always move it again after you create it.)
  • Choose the menu item type from the list that appears at the left.
  • Select from the options displayed for that type.
  • Give the menu item a name in the New Item field — this is what will actually appear in your menu.
  • Click the Add Item button.

menus-gif-add

↑ Table of Contents ↑

Frequently Asked Questions

Q. 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.

Q. 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.

Q. 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.

Q. 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 submenu items, just add a Link menu item and add a # symbol in  the “Link Address (URL)” field.


Next page: Custom Menus in WP Admin

Custom Menus in WP Admin

If you have a theme that supports the Custom Menus feature, you can create and arrange a group of navigation links for your visitors to find the important parts of your site faster.

Most Custom Menus will show in the header area at the top of your site (the main navigation area), though this location can vary from theme to theme. With some themes, you may have the option to create and display multiple custom menus in different places on your site, such as the footer or special sidebar areas.

Customized main navigation menu in the Twenty Thirteen theme

Creating a custom menu allows you to do the following things:

  • Change the order of pages in your menu, or delete them!
  • Create nested sub-menus of links, sometimes referred to as “drop-down” menus
  • Create links to category pages allowing you to collect together posts based on that category
  • Add custom links to other sites, such as a link to your Twitter or Instagram profile

This video shows the basic steps for creating your first custom menu, and you can read more about each feature (plus advanced tricks) below.

↑ Table of Contents ↑

Creating a Custom Menu

To create a custom menu, go to Appearance → Menus in your dashboard.

To create a new menu, click the create a new menu link, then just type in a Menu Name (to help you remember what it is), and click the Create Menu button.

After you create your first menu, you will notice that two new options appear to control the following:

  • Auto add pages – If checked, new pages will be added automatically when you create them.
  • Theme locations – Allows you to decide where you would like your custom menu to appear in your theme. By default, your menu will show up in the main navigation area of your theme. However, you can select a different location if your theme is capable of multiple menus.

Menu Options

↑ Table of Contents ↑

Adding Pages

Adding pages to your menu is as simple as checking the proper boxes for the pages you want and then clicking Add to Menu. If you have a lot of pages, you can choose to view your most recent pages, or search for a page based on its name in the search tab. Only published pages will show up in the list for insertion into your custom menu.

In most cases, you won’t want to put a page marked as private into the menu. However, you can use the Search tab to find private pages, and add them if you like.

Screen Shot 2014-02-14 at 1.11.14 PM

↑ Table of Contents ↑

Want a menu tab to link directly to another website? No problem! Type in the URL where you want to take someone when they click on it, add Link Text to specify what the tab will say, and then click Add to Menu. Optionally, you can have a custom link open in a new window or tab by enabling Link Targets described on the advanced menu settings page.

Screen Shot 2014-02-14 at 1.12.32 PM

↑ Table of Contents ↑

Adding Category Pages

Unlike your main blog page, which displays all of the posts on your site, a Category Page will allow you to create a filtered blog feed that displays only the posts from within a specific category. If you have a lot of categories, you can choose to view your most used, or search for a category based on its name in the search tab. Only categories with at least one published post in them will appear in the list.

Simply check the box of the categories you’d like to add, then click Add to Menu.

Screen Shot 2014-02-14 at 1.14.05 PM

We also have a full guide to setting up category pages.

↑ Table of Contents ↑

Changing the Order & Creating Sub-Menus

At any time, you can change the order and placement of menu items by simply dragging and dropping the items to change their order. To create sub-menus or “drop-down” style menus, drag individual items to the right to “nest” them under a given parent tab. You can undo this by dragging them to the left.

Dragging to create sub-menu items will create drop-down menus in most themes

Be sure to click Save Menu to save any changes to your custom menu.

Menus_save-menu-button

↑ Table of Contents ↑

Creating Static Parent Tabs

Sometimes when you nest items, you don’t have any content on the parent (top-level) tab, in which case you do not want it to be clickable. To make it static, use a Custom Link (see Adding Custom Links above) for the parent tab.

You will have to add an actual URL to the URL field in order to create the menu item — just use any link, such as the URL of your blog.  Once you’ve added it, edit the menu item and delete the URL:

Static parent

Then, click the Save Menu button. If you do not like how the shape of the cursor changes when a reader hovers over a static parent tab, edit the custom link again and place a “#” symbol in the URL field. Then, the link will be clickable, but it won’t go anywhere.

↑ Table of Contents ↑

In addition to arranging menu tabs to your liking, you can also customize the text and other details of each item that you add to your menu. To edit a menu item’s settings, click the down arrow to the right of the menu item. Once expanded, you can modify the following:

Menu item settings

  • Navigation Label – Enter your custom link text here. This overrides the default name of the menu item, replacing it with the name you give it instead.
  • Title Attributes – Adds custom hover text (a tooltip) and improves usability for impaired visitors using assisted devices.
  • Remove – Lets you delete the item from the menu completely.
  • Cancel – Allows you to cancel any changes you have made to it.

Be sure to click the Save Menu button to save any changes to your menu items. Your menu item will now look something like this:

Menus_custom-tab-settings

↑ Table of Contents ↑

Editing Your Menus

If you need to edit your custom menu for any reason, simply return to the Edit Menu screen by going to Appearance → Menus in your WordPress Dashboard. You should see your custom menu and its contents displayed, and you can make any changes you wish to update the menu. Make sure to click Save Menu to save your changes.

Note, if you have more than one menu saved to your site, you will see a selector to choose the menu you want to edit. Learn more about advanced menu settings here.

↑ Table of Contents ↑

Managing Your Menus

If you have created more than one menu, you can manage them by clicking on the Manage Locations tab at the top of the Menus page.

Screen Shot 2014-02-14 at 1.18.39 PM

On the Manage Locations screen, you will see what locations are available for displaying menus in your theme, and can assign a menu to each location by selecting it from the drop-down. You are also given options to Edit (which launches the selected menu in the Edit Menu screen) or Use new menu instead, which will allow you to create a new menu for use in that location.

↑ Table of Contents ↑

Troubleshooting

If you get a warning that says ‘The current theme does not natively support menus, but you can use the “Custom Menu” widget to add any menus you create here to the theme’s sidebar.’ then your theme may not support custom menus. This is usually the case with some of the older themes in our theme library.

In this case you may wish to switch to a theme that supports menus for navigation by searching in Appearance → Themes and choosing “Custom Menu” from the Feature Filters menu. If your theme doesn’t have the navigation support, you can use the Custom Menu Widget in one of the sidebar areas instead.

Not quite what you're looking for?

Get Help