WordPress Custom Navigation

Today I’m going to cover adding the WordPress 3.0 Custom Navigation to your theme. Many free themes don’t use the WordPress custom navigation. This tutorial will show you how to add the WP Nav Menu to your theme, or if you are designing your own WordPress theme you’ll be able to take advantage of the features that are built into WordPress.

What does the WordPress Custom Navigation have to offer?

• If your theme doesn’t have a vertical multi-level drop-down menu this will allow you to add this feature
• You will be able to easily choose which pages appear in your WordPress navigation menu without the use of a plug-in
• Complete control over the layout and order of the navigational menu
• You’ll be able to style the menu however you want
• Dynamic drop-down menu without having to “hard-code” it into your design

OK, lets get started!

First you’ll want to open your themes header.php. You’ll want to find what your theme is currently using for its navigation. If you’re not sure what to look for, here are a few different possibilities:

The list Pages option:

wp_list_pages('exclude=17,38' );

Another Possibility:

<ul id="pagenav">
  <li>
    <a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>">Home</a>
  </li><?php wp_list_pages('sort_column=menu_order&depth=1&title_li=&exclude=17,38'); ?>
</ul>

If you’re menu is hard-coded, it will look something like this:

<ul id="menu-main">  
  <li><a href="#">Home</a></li>  
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>  
  <li><a href="#">Blog</a></li>
</ul>

There are several possibilities, if you can’t find your themes navigation menu you can post a reply or send the code to me in an e-mail and I will be glad to help you find it.

Once you have found the navigational code in your WordPress theme you will replace it with this:

<?php wp_nav_menu( array( 'theme_location' => 'main' ) ); ?>

The menu will have an ID of menu-main by default because I added men’ => ‘main’. You can use your themes id or class to keep the current style. You should avoid using id or tags that might get used by another element. I’ve seen other elements like widgets, and sidebars use the “nav” id, so make sure you use something that is unique. You can name it whatever you like just as long as you remember the name so you can style it later using css. This alone won’t do anything to your navigation, you’ll need to open your functions.php file next and add this:

<?php
add_action( 'init', 'register_my_menus' );
function register_my_menus() {
  register_nav_menus(
  array(
    'main' => 'main',
    'secondary' => 'secondary',
    'tertiary' =>  'tertiary', ));
 } ?>

What we’ve just done is add some classes to the drop-down menu so we can have multi-level navigation. I’ve wrapped the code for the functions file in php tags. You should be able to add this to the bottom of you current functions.php file. If you don’t have a functions file, just create a blank text file and name it functions.php, add the code and save it.

It’s important that you back your files up whenever you are working on the functions.php file. If you miss a closing bracket or any number of possible mistakes it can cause you to crash your website.

If you look at you WordPress site now you will notice it isn’t a drop-down menu yet. To finish this up we need to add some CSS code to it. I’ll get you started with some basic styling. You can customize it however you want later.

Here is the CSS:

#menu ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
z-index: 20;
}
#menu ul li {
float: left;
margin: 0;
padding: 0;
position: relative;
}
#menu li a {
color: #484848;
}
#menu ul li a {
background-color: #F6F6F6;
border-left: 1px solid #484848;
float: left;
font: bold 13px/18px Arial, Helvetica, sans-serif;
margin: 0;
padding: 12px 15px;
}
/*--- DROPDOWN ---*/
#menu ul,#menu ul * {
margin: 0;
padding: 0;
list-style: none;
}
#menu ul ul {
position: absolute;
top: -999em;
float: right;
width: 170px;
/* left offset of submenus
need to match (see below) */
}
#menu ul ul li {
width:300%!important;
}
#menu ul li:hover {
visibility: inherit;
/* fixes IE7 'sticky bug' */
}
#menu ul li {
float: left;
position: relative;
}
#menu ul ul a {
float: left;
display: block;
position: relative;
width: 140px;
}
#menu ul li:hover ul {
left: 0;
top: 42px;
/* match top ul list
item height */
z-index: 99;
}
#menu ul li:hover li ul, #menu ul li li:hover li ul{
top: -999em;
}
#menu ul li li:hover ul, #menu ul li li li:hover ul{
left: 170px;
top: 0;
}
div#menu {
display: block;
margin: 0 auto;
width: 100%;
height: auto;
padding-bottom: 22px;
}
#menu ul li a:hover {
background: #e38484;
color: ghostwhite;
}

Add that to your style.css file, and you now have a WordPress 3.0 compatible custom navigation menu. Now just adjust the style to fit your theme. Good Luck!

To view a sample of the menu, click this link:
Menu Example