How to Add the Custom Menu Feature to Your Theme in WordPress

By Lisa Sabin-Wilson

The Custom Menu feature is already built in to the default Twenty Fourteen WordPress theme, so you don’t have to worry about preparing your theme for it. However, if you’re using a different theme, adding support for the Menu feature to your theme is easy:

  1. Click the Editor link under the Appearance menu. Then click the Theme Functions (functions.php) template.

    The Theme Functions template opens in the text editor on the left side of the Edit Themes page.

  2. Type the following function on a new line in the Theme Functions template file somewhere underneath this line:

    <?php add_theme_support( 'nav-menus' ); ?>
  3. Click the Update File button to save the changes to the template.

    This template tag tells WordPress that your theme can use the Custom Menu feature, and a Menus link now appears under the Appearance menu on the Dashboard.

  4. Open the Header template (header.php).

    Click the Header link on the Edit Themes page to open the Header template in the text editor on the left side of the Edit Themes page.

  5. Add the following template tag by typing it on a new line in the Header template (header.php) somewhere after the <body> tag:

    <?php wp_nav_menu(); ?>

    This template tag is needed so that the menu you build using the Custom Menu feature will display at the top of your website. Check out the different parameters you can use with the wp_nav_menu(); template tag to further customize the display to suit your needs.

  6. Save the changes you’ve made to the Header template.

    Click the Update File button at the bottom of the page.

    Parameter Information Default Tag
    id The unique ID of the menu (because you can create several
    menus, each has a unique ID number)
    Blank wp_nav_menu( array( ‘id’ => ‘1’ )
    );
    slug The menu name in slug form (for example, nav-menu) Blank wp_nav_menu( array( ‘slug’ => ‘nav-menu’
    ) );
    menu The menu name Blank wp_nav_menu( array( ‘menu’ => ‘Nav Menu’
    ) );
    menu_class The CSS class used to style the menu list Menu wp_nav_menu( array( ‘menu_class’ =>
    ‘mymenu’ ) );
    format The HTML markup used to style the list — either an
    unordered list (ul/li) or div class
    div wp_nav_menu( array( ‘format’ =>
    ‘ul’ ) );
    fallback_cb The parameter that creates a fallback if a custom menu
    doesn’t exist
    wp_page_menu (the default list of
    page links)
    wp_nav_menu( array( ‘ fallback_cb’ =>
    ’wp_page_menu’) );
    before The text that displays before the link text None wp_nav_menu( array( ‘before’ =>
    ‘Click Here’ ) );
    after The text that displays after the link text None wp_nav_menu( array( ‘after’ =>
    ‘&raquo;’ ) );