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
- In your WordPress dashboard, under Appearance, go to Menus.
- Enter a new menu name (I recommend one word) and hit Create Menu.
- Add the pages you would like to include and drag/drop into the desired order.
- Go to Screen Options and check the CSS Classes box.
- 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”). - Save Menu.
Pulling in my custom menu
- First, I need the wp nav menu code
[code]<?php wp_nav_menu($args); ?>[/code] - Then you tell your site which of your custom menus that you want to display – mine is called Sitemap.
[code]’menu’ => ‘Sitemap'[/code] - Then I define what class the div surrounding my menu is.
[code] ‘container_class’ => ‘siteindex'[/code] - Finally, I define the ID of the div.
[code]’container_id’ => ‘navmenu’ [/code] - 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:
It’s very important to note that you will not see a menu option under the appearance item in the dashboard area unless the menu is registered in your functions.php file. Here’s how to do that: http://digwp.com/2010/08/using-menus-in-wordpress-3-0/