Create a Navigation Menu in WordPress Twenty Ten

By Lisa Sabin-Wilson from WordPress Web Design For Dummies

The WordPress Twenty Ten theme already supports navigation menus. Looking at Twenty Ten's functions.php file, you can see that the following lines of code handle registering the theme's menu:

// This theme uses wp_nav_menu() in one location.
register_nav_menus( array(
 'primary' => __( 'Primary Navigation', 'twentyten' ),
) );

This code registers a single navigation area with a primary theme location name and a Primary Navigation human-readable name. With the Twenty Ten theme active, choose Appearance→Menus and then create menus using the Custom Menus feature in your Dashboard.

The figure shows the default Twenty Ten theme with a navigation menu displayed below the header graphic of the theme (you see the links Home, Blog, and About).

<?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>
</ul>

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. Because in the example the menu was given the name Main when it was created in the Dashboard, the CSS ID is 'menu-main'. If it had been named Foo, the ID would be 'menu-foo'. This assignment of menu names in the CSS and HTML markup allows you to utilize CSS to create different styles and formats for your menus.

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

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

The CSS you use to customize the display of your menus differs; the example provided is just that — an example. After you get the hang of using CSS, you can try different methods, colors, and styling to create a custom look of your own.