Using WordPress Custom Menus

May 31, 2012 | Written by Ed Andrea

Beginners don't need to know complex coding to manage their menus and navigation in WordPress. They just need to understand the Custom Menu feature that's part of the WordPress core. Before you will be able to use it, though, you will need a theme that supports it. Most of the customizations you would like to make are included in a well designed theme with the proper support.

If you have a theme that supports the Custom Menus feature, you can:

Change the order of pages
Nest pages to create sub-menus
Display posts on multiple pages by creating category pages
Add posts, tag pages, and custom links to your navigation menu

We'll show you how to create and activate your first custom menu in a WordPress site.

Preparation Steps

Create a test practice site.
Choose a template that supports multi-level menus. 2010 and 2011 will work.
Create some sample pages.
Create some sample categories
Create some sample posts.

Step 1: Access the Custom Menu feature

You will know if you have the Custom Menu feature available when you check your Appearance section on the Dashboard. You should have a link for it and should be listed in the theme options. If you don't see the links, you're theme doesn't support it. You can add support by either finding another theme, or adding a plugin that allows you to customize your menu.

Click one of the Menus links to access the feature.
The left side of the page will be grayed-out and inaccessible until you create the first menu.

Step 2: Create a custom menu

Give it a descriptive name and click Create Menu.

Step 3: Assign the custom menu to the main menu position

Your theme may support more than one menu location. If you leave this blank, WordPress will use the default menu that is assigned to the menu position by the template. If you choose the name of the menu you just created, it will replace the default menu. I'm going to choose First Menu, and since I don't have anything configured for it, you can see that on the home page instead of Home and Sample page that you normally see when you first install WordPress, the menu is completely blank.

The menu is completely gone, since it's there are no items on it. Now let's add a home button, using the custom menu feature.

Step 4: Add a menu link to a page

From the Pages section, choose the page you want to be your home page. Note the tabs give you more than one view.

On the right side of the page you'll see what you added to the menu.
Click the triangle to expand the addition.
Change the Navigation Label from Sample Page to Home
Click Save Menu button. - No changes you make will be saved unless you click the Save Menu button which you find to the right top or bottom of the screen.

You can do two important things here:

Automatically add new top-level pages. The default behavior of the built in menu is to add a new menu item on the top level every time you add a page. This can make for a very long and crowded menu. Here you have the option to turn that on and turn it off.
Change the name of the menu item. The default behavior of the built in menu is to use the page title for the name of the menu item. Here you can change the name. I'm going to change the name to Home. Home will appear on the website, and clicking it will take you to the Sample Page.

NOTE: Title Attribute - By default, if you put your mouse over one of your links, it says the same thing as the link. This option allows you to make that mouse over text (the link's title attribute) something different than the link text itself.

Now we will create a second menu item on the top level, and add some sub menu items so they will dropdown when you mouse over them.

Step 6: Add a link to an external page

Go to the section named Custom Links.
If you want the menu link to go to a specific page or another website entirely, you can enter the url in the URL field.
Give it a title and add it to the menu.
Save the changes.

Step 7: Add a placeholder menu item

Go back to Custom Links.
This time, enter a hash mark "#".
Enter a title.
Add to Menu.

By entering the # you are going to create the menu item, but it won't link to anything. It will act as a placeholder. Some people don't want the top link to go anywhere, just mark the category.

Now your menu looks like this.

Home: Goes to a page you selected. Uses the Home menu title instead of the article title.
Training: Goes to a completely different website.
Media: Goes nowhere.

Let's use Media to build some drop down items. This time, we'll connect to a post instead of a page.

Step 8: Link to a post category

Go to the Categories section.
Check the tabs and you will see you can choose from different views.
Choose a category.
Click Add to Menu.
Move to the right side of the screen to edit the item.

Step 9: Create a second level menu

I renamed it Cat Videos.
Mouse over it and you'll get the drag and drop indicator.
Click and drag to the right and onto Media.

It will now be a sub item of Media.

On your website, it will be a dropdown menu item under media. Now you know how to create a custom menu, add pages, placeholders, links and categories to the menu, and create multiple levels as well. To complete your menu, just keep repeating these steps until you have it all arranged and everything is easy to find.

Add comment

Start Online Training

Members get access to all our video training. That's 1,141 training sessions in Joomla, Drupal, WordPress and Coding.

Manage All Your Joomla Sites

With Admincredible you can update and manage all your Joomla sites. If you have 5 or 500 sites, Admincredible will make your life easier! Visit Admincredible.com.

Latest Blog Posts and Tutorials

Blog Categories

Latest Comments

Add a Sitemap to Your Wordpress Site
Comment by ram_theprince
Thank you very much. Thats super cool and simple instructions.
Migrate Virtuemart 1.1 to Version 2
Comment by Stephen H
Worked like a charm. Thanks a million!
Installing TinyMCE in Drupal 7
Comment by Binary
Downloading an older version of TinyMCE resolved my issue.
Installing TinyMCE in Drupal 7
Comment by Binary
These instructions did not work for me. I have followed all of the instructions ...
How to Build Multilingual Joomla Sites
Comment by charlotte
Hello, I have the same problem as APM Designs described (2012-08-02) : the flags appear ...

The License for Our Tutorials

All of our tutorials are published under the Creative Commons Attribution-NonCommercial license. This means:

You can re-use these tutorials.
You can modify these tutorials.
You must link back to our original tutorial.
You can't use these tutorials commercially.

Click here to read the full license.

WordPress Tutorials and Blog Posts