WordPress 3 Custom Menus: Adding a 2nd Level Menu

By Sukrit Dhandhania

In the previous article on creating custom menus in WordPress 3 we looked at how to set up a custom menu in a simple, straightforward way. This approach, although very useful, has some limitations. For example, it does not support multiple menus.

Let's take a look at how we can customize things a bit more and add a second level menu. Adding the first menu is rather straightforward as long as you are using WordPress 3 or better along with a theme that supports this feature. The entire process can be performed using the web-based admin interface. Adding a secondary menu, though, is a little bit trickier as this feature is not yet supported by WordPress. Therefore, we will have to dirty our hands with some code to make this happen.

NOTE: Before you proceed with the following code changes I strongly recommend that you take a backup of your theme files. Also, do not perform the following on a live site.

Create a New Menu Function

The first step to add the secondary menu is to modify the functions.php of your current theme. You will need to add a new function that will add support for a new menu. Enter the following lines of code at the bottom of your functions.php file. As you can see in the piece of code below we are defining two sets of menus here. The first is called Primary Menu, while the second one is Secondary Menu. The system name for these are primary-menu and secondary-menu, respectively. After adding these lines save and close the functions.php file.

add_action( 'init', 'my_custom_menus' );
      function my_custom_menus() {
         register_nav_menus(
            array(
      'primary-menu' => __( 'Primary Menu' ),
      'secondary-menu' => __( 'Secondary Menu' )
                    )
             );
      }

Placing the Menu

The next part can be a bit tricky. Open the header.php file in your favorite text editor. You need to enter the following line in this file. The tricky part is finding where to place it. You will have to play around with it till you get it right. The placement will differ from theme to theme.

<?php wp_nav_menu( array( 'theme_location' => 'secondary-menu', 'menu_class' => 'secondary', 'fallback_cb' => '') ); ?>

Adding Menu Items

Once you have figured out where to place your menu return to the web based admin dashboard of your WordPress installation. Go to Appearance -> Menus. To the right side of your screen you will see tabs for menus. Create two menus here. One called Primary Menu, and the other called Secondary Menu. Populate these with the menu content that you want displayed in the respective menus. Remember to hit the Save Menu button once you are done.

Image 1

In the left pane titled Theme Locations you should now have two additional options - Primary Menu and Secondary menu. Once you have saved your menus they should appear in the options in drop down menu here. Select the respective menus in the Theme Locations pane and then hit the Save button. Now take a look at the front end of your WordPress installation. You should find both menus displayed. The second menu may not display correctly, but make sure that it shows up. You can return to the header.php to fix its location if it does not display in the right place, or change the order of the items from the admin interface.

Image 2

Fixing the View

As I mentioned in the last step the second menu might not display correctly. To fix this you will have to look into the CSS settings of your current theme. The changes required will depend on the theme you are using. The CSS settings will differ greatly from theme to theme. If you are using images instead of text the changes required will be drastically different. As in the screenshot below the secondary menu is displaying vertically, unlike the original menu. This can easily be fixed by editing the CSS settings. Using a tool such as CSS Edit or Firebug you can test what settings to use to fix this before making the final changes to your theme's CSS files.

Image 3



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date