We will be adding a second menu to a child theme of Twenty Ten. It is always a good idea to make all edits using a child theme, as messing with the Twenty Ten theme itself can cause you problem once the Twenty Ten theme is updated/changed.
Here’s what we need to do:
- Tell WordPress that we need a second menu (so it shows up in the Menu section of the WP Admin area)
- Add the code in our child theme where we want the menu to appear. In this example, we want the second menu to appear on the top right (see the Gym At Home website for the implementation)
- Style the menu so it is consistent with our design (using CSS)
Having said that, you need to open up two files:
Add the following code in functions.php :
[cc lang=”php”]register_nav_menus( array(
‘secondary’ => __( ‘Top Navigation’, ‘twentyten’ ),
Add the following code in header.php (I placed the code just above the #header div)
‘topsy-header’, ‘menu_class’ => ‘topsy-menu’, ‘theme_location’ => ‘secondary’, ‘depth’ => 0, ‘fallback_cb’ => ” ) ); ?>
What you need to know in the above code is that container_class is going to be the div in which the menu is going to be wrapped in. In this case, you need to style for a div with the class topsy-header. The menu list (ul) will be styled using the menu_class argument, which in this case is topsy-menu. For more detailed information on what the wp_nav_menu() function does in WordPress, head over to the WP Codex for more details.
Head over to your Menus section in WP Admin and rejoice at something like this:
But wait, we are not done yet! We need to do is add some CSS styling to the div that we had wrapped the second menu in. After you have done the CSS styling, your second menu is ready to grace your pages. Bring Thanks To The Lord! 😛