Working with WordPress custom menus

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:

Screen capture of the menu I am working on


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:

1 Comment

Submit a Comment

Your email address will not be published. Required fields are marked *