Adding Custom Menus in your Theme for WordPress 3.x

The New Menu system in WordPress 3.x works great. It allows you to create multiple menus and add multi-level menus easily without any hackery. Although many users have their upgraded their WordPress installations, many old themes still do not support latest Menu system. Since it requires some coding, let’s see how can this be enabled in your theme.

Before getting into the code, first understand that you need to do four things:

1. Enable WordPress 3 Menus in your theme
2. Adding and setting up Menus from Admin panel
3. Adding code to display menus in your theme files
4. Adding styles to your theme css file

Step 1 – Register and Enable Menus in your Theme functions.php File

register_nav_menus allows to register multiple custom navigation menus in the new custom menu editor of WordPress 3.0. This allows for creation of custom menus in the dashboard for use in your theme.

Open your theme functions.php and add following code, it will add two custom menus options inside your admin Panel > Menus for you to add menus there.

if ( function_exists( 'register_nav_menus' ) ) {
	register_nav_menus(
		array(
		  'left_menu' => 'My Left Menu',
		  'footer_menu' => 'My Footer Menu'
		)
	);
}

Step 2 – Adding and setting up Menus from Admin Panel

Since this feature has been enabled in the first step, now go to admin panel and add and set up your menus.

Step 3 – Adding code to display menus in your theme

Now add following code in your theme footer file to display that menu:

Step 4 – Adding styles to your theme css file

Now let’s add some styles to make the footer menu look nicer. add following styles to your theme style.css file:

#footerMenu {
text-align: center;
font-size: 11px;
color: #787878;
}

#footerMenu li {
text-align: justify;
padding-left: 1em;
padding-bottom: .4em;
padding-right: 2em;
padding-top: .4em;
font-size: 12px;
font-weight: bold;
display: inline;
text-decoration: none;
font-style: normal;
}

#footerMenu ul {
list-style: none;
margin: 20px 35px;
padding: 0;
}

#footerMenu a, a:focus, a:active,a:visited {
text-decoration: none;
color: #ccc;
}

#footerMenu a:hover {
text-decoration: underline;
color: #ccc;
}

Hope that helps.

Cheers!