How To Create Wordpress Custom Menus

The Appearance >>> Menus SubPanel became available beginning with Wordpress Version 3.0. In order for you to use a Custom Navigation Menu in place of your theme’s default menu, you must have support for this feature registered in the theme's functions.php file.

Using The Screen Options Tab

The Screen Options tab, located near top right corner of page, allows you to choose which modules you want displayed, and which ones you want to not be displayed, in the underlying SubPanel. When you click on the Screen Options tab, it shows a list of the possible modules and options for that page, with a check-box next to each one. Simply check the box for each module or option you want to see displayed, and uncheck the box for any you choose not to display. When finished, click the Screen Options tab again to close the Screen Options.

How To Expand, Collapse, and Rearrange Modules

The modules, Posts for instance, can be expanded, or collapsed, by clicking on the module title bar.

How To Create a Menu

It's very simple to create a new custom menu. All it takes is to click on the + tab, enter in a name for your menu, and click the Create Menu button.

It is necessary to point out that if the theme you are currently using does not support menus, the following message will be displayed:

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

The message will display to let you know that widgets can be used to put custom menus in your themes sidebar.

My personal favorite theme to use on my websites that can take full advantage of the custom menu feature is the Builder Theme by iThemes. This theme is a highly advanced theme that allows you to create unlimited page and post layouts, and you can put menus anywhere you want, and as many as you want.

You can create as many menus as you wish, whatever suits your purposes. In the event that your theme includes support for more than one custom menu, you can use the drop down box to choose which custom menu to associate with each. As pointed out above you are also able to use custom menus in conjunction with the Custom Menus widget.

After creating a custom menu, these options are available:

Delete Menu---Click this link if you wish to delete the menu. Be aware that deleting also deletes the menu items.

Automatically add new top-level pages---Check this box so that anytime you create a new top-level Page, that Page will automatically be added to the menu

Save Menu---Click this button to save your menu and any changes you have made.

How To Add Menu Items

Once a menu is created, it is possible to add detail items to the menu. You can add items like custom links, pages, and categories using the available options in the left column. You can add any custom post types or custom taxonomies that you may have created. In case you don't see your custom post types or taxonomies, don't forget to check the Screen Options tab to make sure they are checked to be "Show on Screen".

After adding your items to a menu, you can then drag and drop them to put them in the order you want. Once you have the menu items arranged correctly, you can click each item to reveal additional configuration options. Another neat feature, you can also drag a menu item a little to the right to make it a submenu. This feature allows you to create menus with hierarchy. As you drag an item to the right you'll see when the position of the drop target (the dotted lines box) shifts over to portray the nested placement. IMPORTANT, once you have finished creating and configuring your custom menu, be sure and click the Save Menu button.

So, with the Custom Menu feature in Wordpress, you can specify a different navigation label for a menu item as well as other attributes. You can create multiple menus, as many as needed to suit your purpose. If your theme allows the use of more than one menu, you can choose which custom menu to associate with each. You can also display your custom menus using the Custom Menus widget.

Choosing A Theme Location For A Menu

Theme locations allows you to select the desired placement of your menu. The WordPress default TwentyTen theme only supports one menu location, so you will see the message 'Your theme supports 1 menu. Select which menu you would like to use'. (If you have added the code to allow more navigation menus in your theme, you will see those in the pull-down location options)

Location---From the pull down box, make your selection for the menu that will be presented in the location, for example, Primary Location

Save---Click to save the location that you selected.

Adding A Custom Link

Custom links allows you to create links to any desired URL and give them any desired display name.

URL---Enter the URL for your custom link.

Label---Enter the label (display name) describing the custom link URL.

Add to Menu---Click this button to add your custom link to the menu.

The link is now added to the menu, it will be displayed to the right with the label, the word 'Custom', and a configuration arrow allowing you to change the URL or Label and to remove the custom link from the menu if desired.

Adding Links To Post

Use this option to add links to specific posts. Three tabs, 'Most Recent', 'View All', and 'Search', allow you to choose what posts are displayed for selection as a menu item.

Checkbox---Check the box next to the item that you want to add to the menu.

Select All---Checking this box will cause the checkbox to be checked on all items. Clicking this again will cause all items to be unchecked.

Add to Menu---Click this button to add your selected items to the menu on the right.

Adding Links To Pages

Here is where you add links to specific pages. Three tabs, 'Most Recent', 'View All', and 'Search', are shown.They allow you to choose what pages are displayed for selection as a menu item. When the 'View All' tab is displayed, a Home link choice, while not necessarily an actual page, also becomes available to add to the menu. The 'Checkbox', 'Select All', and 'Add to Menu' options, described in the Posts section above, are also displayed in this module.

Adding Links To Categories

Your categories can also be added to the menu. Three tabs, 'Most Recent', 'View All', and 'Search' allow you to determine what categories are displayed for selection as a menu item. The list does not display in any particular hierarchy. The 'Checkbox', 'Select All', and 'Add to Menu' options are also displayed in this module.

Adding Links To Post Tags

You can also add Post Tags to menus. Again, three tabs, 'Most Recent', 'View All', and 'Search' determine what categories are displayed for you to select as a menu item. The 'Checkbox', 'Select All', and 'Add to Menu' options are also displayed in this module.

Adding Links To Custom Post Types and Taxonomies

Custom post types and taxonomies will also be available to add as menu items. In the event that you don't see your custom post types or taxonomies, be sure and check the 'Screen Options' tab to make sure those modules are set to display. As expected, the options available under each of the custom post type and taxonomy modules correspond to those used for Posts, Pages, Categories, and Post Tags.

How To Rearrange, Configure, and Delete Menu Items

After you add your items to a menu, those menu items can be rearranged in whatever order you wish. Place your mouse cursor over the menu item title and then when the mouse cursor changes to 4-arrows, hold the left-mouse button down and drag the module to where you want to place it. Then release the mouse button and continue rearranging the items to achieve the desired order. Also, remember that by dragging a menu item slightly to the right of the menu item above it you can create a hierarchy (parent/child) relationship in the menu.

Every Menu Item will have a configuration arrow on the right side of the Menu Item title. Clicking there opens the configuration box for that item. If you click the arrow a second time it will close the configuration box. Again, if you don't see Link Target, CSS Classes, Link Relationship (XFN), and Description, then check the Screen Options tab to make sure those boxes are checked to make the options available.

The configuration choices are:

Navigation Label---The label you want to show for this particular menu item

Title Attribute---The attribute you want to use when displaying the label

Link Target---Here you can select "Same window or tab" or "New window or tab" from the pulldown.

CSS Classes---Optional CSS Classes for this menu item

Link Relationship---Allows for the generation of XFN attributes automatically. Allows you to show how you are related to the authors/owners of site to which you are linking.

Description---Enter a description for this link. The description will be displayed in the menu assuming that the current theme supports it.

Original---A link to the original source of the menu item. For example, a link to view the post or page).

Remove---Remove this menu item from the menu.

Cancel---Cancel the configuration of the menu item.

How To Add Menu Support to Themes

The default WordPress TwentyTen theme supports navigation menus. If your theme does not support the custom menu feature, you can do it yourself by adding the appropriate code to your theme's function.php file. For further information on implementing custom menus for a theme, see The Wordpress Codex

If you want to avoid the hassle of trying to add code to your current theme to get it to fully support custom menus, then once again I recommend you take a look at the Builder Theme by iThemes. Builder allows you to create unlimited page and post layouts, and you can put menus anywhere you want, and as many as you want. No coding needed, ready to use your custom menus to full advantage.