WordPress Wednesdays: Using the Built-in Menu System

Geek Factor: 4

In version 3.0, WordPress introduced a menu system, which allowed editing the menus that display on your site through the WP Dashboard. Adding the menu to your theme is pretty simple, and allows for easier menu customization, even for non-technical users.

Themes like Twenty Eleven already have the menu functionality included, but if you are working with a theme you built yourself, it will first need to be added to the functions.php file.

Here is a simple function to add to this file to create a new menu; there are more attributes you can use in the WordPress Codex:

[php]
function register_my_menu() {
register_nav_menus(array(
‘primary’ => ‘Primary Menu’,
‘secondary’ => ‘Secondary Menu’
) );
}
add_action( ‘init’, ‘register_my_menu’ );
[/php]

Once this function is added, you will now have the ‘Menu’ option available in the ‘Appearance’ navigation.

In our example function, we created two menus — the ‘Primary Menu’ and ‘Secondary Menu’. Next, we will need to determine where those spots are placed in the theme by adding WP template tags to the code. Then we will need to build the menus themselves using the WP Dashboard.

First, we’ll designate a space in the theme for the menus to be displayed.

The following template tag is used to display the menu — this can be done using the wp_nav_menu() template tag:

[php]

[/php]

Because we have created two menus, we will need to declare which menu should be displayed in which spot; this can be done using the ‘theme_location’ attribute. The below example would be used to place the ‘Primary Menu’ using its short name:

[php]
‘primary’) );
?>
[/php]

The wp_nav_menu() tag also allows a number of other options, including what HTML elements to wrap the menu in, what classes or IDs to give that container, and the depth of menu items you’d like to display.

Last but not least, now you can go to Appearance > Menus in the Dashboard, and customize the contents of your menu.

Sidenote: I’ll admit, the first time I went through the process of creating the menus, I was a bit confused. When I got to the WordPress Dashboard, I was surprised to see the two menus I had registered in the functions.php were not actually there. In actuality, WordPress treats the menus registered in the functions.php file more like ‘slots’ to place menus in the theme. These ‘slots’ can then be paired with one of the (potentially many) menus you create in the WP Dashboard.

In the Menus section, you can create a new menu by typing a name and clicking ‘Create Menu’:

Next, you can select what ‘slot’ you would like this menu to display in. All of the menus you create will appear in the dropdowns below each menu ‘slot’ that was registered in the functions.php file. Because of this, you can create multiple menus using the WordPress Dashboard and save them, and easily swap them out to the one or more spaces in your theme.

Lastly, you can add the pages (or categories) that should appear in the new menu by checking them off in the Dashboard and clicking the ‘Add to Menu’ button. There are multiple views of the pages, allowing for browsing and searching pages and categories that already exist on the site, and the ability to add links to external webpages to the menus.

Once pages have been added to the menu, you can drag and drop them into the order that they should appear on the site:

You can also drag the navigation items slightly to the right to make them display as ‘childpages’ of other pages.

WordPress outputs the menus created through the Dashboard in an unordered list, meaning they can be styled as standard horizontal or vertical menus, as well as multi-level flyout menus using some CSS and JavaScript.

Although the initial set-up for the WordPress menus requires a bit more work than hardcoding the menus into your WordPress theme (my previous method of choice), allowing non-coding users to alter a site’s navigation themselves is extremely helpful.

Have you made the move to WordPress’s new menu system? What do you think?

Leave a Comment

Note: Fields marked with a * are required; email addresses are not published.

Legal FAQ Collections