Today I replaced two static links with a custom WordPress menu in a site that I am working on.

Here is where I am starting with, in static XHTML and CSS:

And here is the code:

[code]<div id="siteindex"><a href="sitemap.html">Site Index</a></div><br /><br />
<div id="quicklinks"><a href="quicklinks.html">Ivey Quicklinks</a></div>[/code]

Below is the process for converting the above into an identical end result, built with a WordPress custom menu instead of static XHTML.

Creating the actual custom menu in WordPress

1. In your WordPress dashboard, under Appearance, go to Menus.
2. Enter a new menu name (I recommend one word) and hit Create Menu.
3. Add the pages you would like to include and drag/drop into the desired order.
4. Go to Screen Options and check the CSS Classes box.
5. Expand each page in your menu and add the desired class.
   Note: For me, I added the same class to each of my items (“whitelinks”).
6. Save Menu.

Pulling in my custom menu

1. First, I need the wp nav menu code
   [code]<?php wp_nav_menu($args); ?>[/code]

2. Then you tell your site which of your custom menus that you want to display – mine is called Sitemap.
   [code]’menu’ => ‘Sitemap'[/code]

3. Then I define what class the div surrounding my menu is.
   [code] ‘container_class’ => ‘siteindex'[/code]

4. Finally, I define the ID of the div.
   [code]’container_id’ => ‘navmenu’ [/code]

5. And I end up with:
   [code]<?php wp_nav_menu( array(‘menu’ => ‘sitemap’, ‘container_class’ => ‘siteindex’, ‘container_id’ => ‘navmenu’ )); ?>[/code]

   Note: the $args  got replaced with array(), and each detail (argument) that I added is separated by a comma and a space.

Formatting my custom menu

Originally, my menu items were formatted by a class on the <a> tag.  When we use PHP to pull a dynamic menu into WordPress, the menu is pulled in as a list (ul) – each item is a new list item (li). While WordPress does allow me to define a CSS class for each item of my custom menu, it applies this class to the <li> tag for that menu item, rather than the <a> tag.

So, what I have to do is tell WordPress to format a link within a specific class:

[css]a.whitelink {font-size: 11px; color: #FFFFFF; text-decoration: none;}<br /><br />
a.whitelink:hover {text-decoration: underline;}[/css]

My last step is adding the code to take my bulleted list and turn it into a horizontal menu (items all on one line/side by side):

[code]#navmenu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; }<br /><br />
#navmenu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; }<br /><br />
#navmenu li {display: inline; }<br /><br />
#navmenu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; }<br /><br />
#navmenu li {display: inline; padding: 5px 10px 5px 10px}[/code]

Done!

Sources:

• WordPress Codex / wp_nav_menu
• WordPress Codex / creating horizontal menus