How to Add the Custom Menus Feature to a WordPress Theme - dummies

How to Add the Custom Menus Feature to a WordPress Theme

By Lisa Sabin-Wilson

The WordPress Custom Menus feature is already built in to the default Twenty Thirteen theme, so you don’t have to worry about preparing your theme for it. However, if you’re using a different theme, or creating your own, follow these steps to add this functionality:

  1. On the Dashboard, choose Appearance→Editor.

    The Edit Themes page appears.

  2. Click the Theme Functions (functions.php) template.

    The Theme Functions template opens in the text editor in the center of the Edit Themes page.

  3. Type the following function on a new line anywhere above the closing ?> in the Theme Functions template:

    add_theme_support( 'nav-menus' );

    This template tag tells WordPress that your theme can use the Custom Menus feature.

  4. Click the Update File button to save the changes to the template.

    A Menus link appears in the Appearance menu.

    Next, you want to add the menus template tag to the Header template (header.php).

  5. On the Edit Themes page, open the Header template (header.php).

    The Header template opens in the text editor in the middle of the Edit Themes page.

  6. Add the following template tag by typing it on a new line anywhere in the Header template (header.php):

    <?php wp_nav_menu(); ?>

    This template tag is needed so that the menu you build using the Custom Menus feature appears at the top of your website. Table 12-6 gives the details on the different parameters you can use with the wp_nav_menu(); template tag to customize the display to suit your needs.

  7. Click the Update File button to save the changes you’ve made to the Header template.

    The navigation menu that you build on the Menus page on your Dashboard (choose Appearance→Menus) now appears in the header area of your website.

This is the default Twenty Thirteen theme with a navigation menu displayed below the header graphic (you see the links Home, Blog, and About).


You can create a Main menu on the WordPress Dashboard. The template tag used in the theme to display that menu looks like this:

<?php wp_nav_menu(‘Main’); ?>

The HTML markup for the menu is generated as an unordered list, by default, and looks like this:

<ul id="menu-main" class="menu">
<li id="menu-item-53" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-53"><a href="/">Home</a></li>
<li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-51"><a href="http://localhost/wpdemo/blog/">Blog</a></li>
<li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52"><a href="http://localhost/wpdemo/about/">About</a></li>

Notice in the HTML markup that the first line defines the CSS ID and class:

<ul id=”menu-main” class=”menu”>

The ID in that line reflects the name that you gave your menu. This assignment of menu names in the CSS and HTML markup allows you to use CSS to create different styles and formats for your menus.

When developing themes for yourself or others, make sure that the CSS you define for the menus accounts for subpages by creating drop-down list effects, or links that drop down from the menu when you hover your mouse pointer over the main parent link. You can accomplish this in several ways. Here is a block of CSS that you can use to create a nice style for your menu.

#menu-main {
 width: 960px;
 font-family: Georgia, Times New Roman, Trebuchet MS;
 font-size: 16px;
 color: #FFFFFF;
 margin: 0 auto 0;
 clear: both;
 overflow: hidden;
#menu-main ul {
 width: 100%;
 float: left;
 list-style: none;
 margin: 0;
 padding: 0;
#menu-main li {
 float: left;
 list-style: none;
#menu-main li a {
 color: #FFF;
 display: block;
 font-size: 16px;
 margin: 0;
 padding: 12px 15px;
 text-decoration: none;
 position: relative;
#menu-main li a:hover, #menu-main li a:active, #menu-main .current_page_item a, #menu-main .current-cat a, #menu-main .current-menu-item {
 color: #CCC;
#menu-main li li a, #menu-main li li a:link, #menu-main li li a:visited {
 background: #555;
 color: #FFF;
 width: 138px;
 font-size: 12px;
 margin: 0;
 padding: 5px 10px;
 border-left: 1px solid #FFF;
 border-right: 1px solid #FFF;
 border-bottom: 1px solid #FFF;
 position: relative;
#menu-main li li a:hover, #menu-main li li a:active {
 background: #333;
 color: #FFF;
#menu-main li ul {
 z-index: 9999;
 position: absolute;
 left: -999em;
 height: auto;
 width: 160px;
#menu-main li ul a {
 width: 140px;
#menu-main li ul ul {
 margin: -31px 0 0 159px;
#menu-main li:hover ul ul, #menu-main li:hover ul ul ul{
 left: -999em;
#menu-main li:hover ul, #menu-main li li:hover ul, #menu-main li li li:hover ul{
 left: auto;
#menu-main li:hover {
 position: static;