Adding Custom Menu Locations in WordPress Themes

Basic Setup

Step 1: First, we need to register your new menus. In this example, we’ll create the menus Header Navigation and Expanded Footer. Add this PHP code to your functions.php, or link to it in a separate file:
[code]
// Add Your Menu Locations
function register_my_menus() {
register_nav_menus(
array(
‘header_navigation’ => __( ‘Header Navigation’ ),
‘expanded_footer’ => __( ‘Expanded Footer’ )
)
);
}
add_action( ‘init’, ‘register_my_menus’ );
[/code]

Step 2: Let your users know that your menu location exists by adding a message to the front end when no menu is yet assigned. Insert this code directly below the previous:
[code]
function default_header_nav() { // HTML markup for a default message in menu location
echo “


}

function default_expanded_footer() {
echo “


}
[/code]
Step 3: Insert this code into your templates wherever you want your Header Navigation menu to appear:
[code]
<?php
wp_nav_menu(array(
‘theme_location’ => ‘header_navigation’, // menu slug from step 1
‘container’ => false, // ‘div’ container will not be added
‘menu_class’ => ‘nav’, //

Doug

Doug is an experienced project leader who strives to keep our clients' projects flowing smoothly. As a Developer, Doug is able to ensure a high level of customer satisfaction by focusing his efforts on the setup & support of content management systems (i.e. WordPress & Drupal), custom theme development, CSS/HTML coding, and graphic design. When Doug is not working on web projects, he can be found performing with several professional bands around San Diego.

34 thoughts to “Adding Custom Menu Locations in WordPress Themes”

  1. Hi, great staff.
    Little problem with “TEMPLATEPATH”…I am using a child theme, so it telling me that cannot find menus.php because it searching it inside of parent admin, not the child one.

    any idea?

  2. Hi there,
    Great tutorial. It helped me a lot to add custom menus in my website.
    But I am wondering about one thing, that is how can I add CSS to this custom menu?
    Thanks in advance for your professional support.

  3. Hi there, Great tutorial. It helped me a lot to add custom menus in my website. But I am wondering about one thing, that is how can I add CSS to this custom menu? Thanks in advance for your professional support.

  4. I wouldn’t create a custom menu in this way, because then the markup is hard-coded, and end users wouldn’t have an easy way of changing the menu. A better approach is to use the admin interface to create your menu, and add your menu location to the admin interface using register_nav menus():

    register_nav_menus( array(
    ‘primary’ => __( ‘Primary Menu’, ‘theme_name’ ),
    ‘mymenu’ => __(‘My Menu, ‘my menu’)
    ) );

    This will make the menu location available in the menu locations dropdown, where you can place the menu you’ve created in the admin interface. Then, place the menu code into whatever template where you need the menu to appear. All of the values used here are for demonstration purposes. Study the markup of your theme for the relevant classes and ids, bearing in mind that ‘menu_id’ should be unique to your custom menu :

    ‘mymenu’,
    ‘container_class’ => ‘collapse navbar-collapse’,
    ‘container_id’ => ‘navbarNavDropdown’,
    ‘menu_class’ => ‘navbar-nav’,
    ‘fallback_cb’ => ”,
    ‘menu_id’ => ‘my-menu’,
    #if you have a walker function in your theme:
    ‘walker’ => myCustomWalkerFunction(),
    )
    ); ?>

Leave a Reply

Your email address will not be published. Required fields are marked *