Step 1: Register your menu
The first thing you need to do is to register your menu so that you can use it within your theme.
To register a single navigation menu, use:
register_nav_menu( $location, $description );
$location is the slug name
$description is the label used within the Dashboard
Step 2: Displaying your new menu
You can use the wp_nav_menu() function.
The function has several parameters to work with. Here are the defaults as listed in the WordPress.org Codex:
<?php
$defaults = array(
'theme_location' => ,
'menu' => ,
'container' => 'div',
'container_class' => 'menu-{menu slug}-container',
'container_id' => ,
'menu_class' => 'menu',
'menu_id' => ,
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => ,
'after' => ,
'link_before' => ,
'link_after' => ,
'items_wrap' => '<ul id=\"%1$s\" class=\"%2$s\">%3$s</ul>',
'depth' => 0,
'walker' =>
);
wp_nav_menu( $defaults );
?>
And a brief description:
- $menu: (string) The menu that is desired; accepts (matching in order) id, slug, name
- $container: (string) Whether to wrap the ul, and what to wrap it with
- $container_class: (string) The class that is applied to the container
- $container_id: (string) The ID that is applied to the container
- $menu_class: (string) CSS class to use for the ul element which forms the menu
- $menu_id: (string) The ID that is applied to the ul element which forms the menu
- $echo: (boolean) Whether to echo the menu or return it
- $fallback_cb: (string) If the menu doesn’t exists, the callback function to use
- $before: (string) Output text before the link text
- $after: (string) Output text after the link text
- $link_before: (string) Output text before the link
- $link_after: (string) Output text after the link
- $depth: (integer) How many levels of the hierarchy are to be included where 0 means all
- $walker: (object) Custom walker object to use
- $theme_location: (string) The location in the theme to be used – must be registered with register_nav_menu() in order to be selectable by the user
For our particular menu we want to specify the menu that we registered earlier (main-menu). We also want to specify the containing class for the menu. Within your theme files, wherever you’d like your menu displayed, add the following code.
<?php wp_nav_menu( array( 'menu' => 'main-menu', 'container_class' => 'nav' ) ); ?>
Step 3: Setting up your menu within the Dashboard
After you’ve updated your theme files, the next task is to actually set up your menu within the WordPress Dashboard. The Menus option can be found within the Appearance section of the left hand navigation.