Using WordPress Custom Menus
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.
Thank you for a very informative and clear tutorial. Sometimes it’s the simplest things such as changing the menu in a WordPress installation that takes forever to solve.