Dec

02

2011

Add and Style Custom Navigation Menus in WordPress Using wp_nav_menu

WordPress  Posted by on December 2nd, 2011 / 4 comments
Wordpress-logo

One of the best features in the WordPress 3.x is the ability to add multiple Menus from pages, posts, customs posts types or even just anything as you desire. It’s very easy to first register custom menu in the admin panel and then call in your theme files and style them as you want.

To add a custom Menu option on your theme, add this to your theme function.php file:

 
if ( function_exists( 'register_nav_menus' ) ) {
  	register_nav_menus(
  		array(
  		  'footer_menu' => 'My Custom Footer Menu',
  		  'portfolio_sidebar_menu' => 'Portfolio Sidebar Menu',   		  
		  'services_sidebar_menu' => 'Services Sidebar Menu'
  		)
  	);
}
//this will three custom menus options in your WP-Admin menus

Inside your theme file, her;es how you cxall this above menu. Make sure you add some menus items using WP-Admin before calling it. I’m disabling the navigation container div and assignign it a specific class left-sidebar in the arguments to style the menus.

 
$args = array('container'=>'',
              'menu' => 'portfolio',
              'items_wrap' => '<div class="left-sidebar">%3$s</div>' );
 
wp_nav_menu( $args );

Here’s the css for styling:

 
.left-sidebar {
 
  width: 228px;
  margin:0 auto;
  list-style-type: none;
  text-align: center;
 
}
 
.left-sidebar li a, .left-sidebar li a:visited{
 
display:block;
 padding-top:1.3em;
background:url('images/button.png') center bottom no-repeat;	
font-size: 18px; 
color: #ffffff; font-weight: bold; 
text-decoration: none;
height: 58px;
margin-bottom: 5px;
}
 
.left-sidebar li a:hover{
 padding-top:1.3em;
display:block;
background:url('images/button.png') center top no-repeat;	
font-size: 18px; 
color: #ffffff; font-weight: bold; 
text-decoration: none;
height: 58px;
margin-bottom: 5px;
}

Here’s the button

Hope that helps.

Cheers!

Related posts:

  1. Adding Custom Menus in your Theme for WordPress 3.x
  2. WordPress Custom Post Type Listing by Alphabets with Alphabetical Navigation
  3. WordPress Custom Post Types – Best Plugin for the Job and How to Set it Up
  4. Resolve Permalinks 404 Error with Custom Post Type using WordPress
  5. Custom Page Templates Not Showing Up in Page Attributes Drop Down in WordPress Admin Panel