Enabling WordPress Menus

31 October 2011

This post looks at enabling WordPress menus – this great feature has been available since WordPress 3 +.  For all those themes that don’t have this feature enabled this is how to do it.

Step 1. Open up your your functions.php file and add the following code snippet:

register_nav_menus(array(‘primary’=>__(‘Primary Menu’),));

You can add as many menus throughout your theme as you like. To do this you’ll need to add this:

register_nav_menus(array(‘primary’=>__(‘Primary Menu’),

‘secondary’=>__(‘Secondary Menu’),));

Step 2. Then you’ll need to replace the existing menu items with this:

<?php wp_nav_menu( array( ‘sort_column’ => ‘menu_order’, ‘container_class’ => ‘menu-header’ )  ); if (is_home()) ?>

Open the header.php file a look for the existing navigation div. Then delete your menu items and replace it with the above code between your unordered lists <u>HERE</ul> .

For example:

<div id=”navigation”>
<ul>
<?php wp_nav_menu( array( ‘sort_column’ => ‘menu_order’, ‘container_class’ => ‘menu-header’ )  ); if (is_home()) ?>
</ul>
</div>

Step 3. Once you’ve added this go to your Appearance > Menus and add a name for your new menu, press the create menu button. Then choose the “primary” menu from the drop down in the Theme Locations. Save it and you’re done.

After enabling WordPress menus the CSS active state is not showing!

One thing you may find is that the “active” state for your menu does not work. You’ll need to add some additional CSS to your parent div for this to work correctly. Basically you want WordPress to show the active state class for parent and child elements.

Add this CSS code:

#navigation .current_page_item a:link, #navigation .current_page_item a:visited{
color: #000;
}

That’s it, enabling WordPress menus has never been so easy. If you need any help just ask!

[ishare_wpress type=”inline”]