September 1, 2013 Victor

Developing Menus for WordPress

When developing a website with WordPress, one of my favorite parts of the process is designing and developing the navigation look and function for the website.

Wordpress has a great menu function that gives a user flexibility when managing menus. It’s called the wp_nav_menu function and I used it to create the navigation for my website. The look of the navigation would be button-like and would have a graphic simulating a light emitting diode or led. This is the result using CSS3 and a simple graphic – see below:

menu graphic

To make things interesting, I decided to create graphics with different colors for each menu item, but you can use any graphic you feel would be appropriate. For example, if you have a menu item designated as ‘Home’, you can have a little home graphic next to your text for that menu item. WordPress allows you to do that with the different attributes that can be assigned and used by each menu item.

Justin Tadlock wrote an excellent article on developing menus for your WordPress website. In the article he introduces you to many of the features associated with the wp_nav_menu function.

In this article, I’m going to demonstrate how to use one of the attributes and how I used it to create the navigation for my site. We’ll be using the ‘CSS classes’ property and assigning a unique value for each of the menu items.

Let’s get started

Since this article assumes some familiarity with the WordPress platform, I’ll be omitting menu setup and focus on the attribute that can make each menu item unique.

appearance menu
On your menu page which you can access from the ‘Appearance’ menu on your Admin page,
toggle
you can open the menu item by clicking on the right side tab,
empty field
this reveals the individual attributes for each menu item.

Is your CSS Classes field visible?

By default, you may not see the “CSS Classes” field. To make it visible, click on the “Screen Options” tab located at the top right corner just under the admin bar. That will reveal the properties available for each menu item under the ‘Show advanced menu properties’ title. Click the ‘CSS Classes’ checkbox option to make it available.

screen options
css classes

Now, by clicking on the right tab for each page on your menu, you can enter a name in the ‘CSS Classes’ field and your new unique class will be added to the list of classes that WordPress generates automatically.

class select
In this case, I used ‘green’ as the name for this class. This new class is now added to this menu item. You can choose a name that you prefer.

Now you’ve done it

This is what the markup for the navigation on my website looks like now.

markup example

Now you can target the anchor tag with the li tag that has the new unique class and add some CSS styling. It can look like this:

#your-nav-id li.green a {
color: #5A0; /* green color */
}

This is the default styling that I used to create a unique menu item for my personal website.

#your-nav-id li.menu-item a {
padding: 7px 32px 7px 14px;
text-decoration: none;
border: 1px solid #AAA;
border-top: 1px solid #CCC;
border-bottom: 1px solid #888;
border-radius: 4px;
font: bold 14px/16px Arial, Helvetica, sans-serif;
box-shadow: inset 0 1px 0 0 #FFF, 0 5px 3px -2px #777;
color: #555;
text-shadow: 0 1px 0 #FFF;
display: block;
background: url("../images/menu/blue_led.png") no-repeat right -37px, -moz-linear-gradient(top, #E7E7E7, #FFF);
background: url("../images/menu/blue_led.png") no-repeat right -37px, -ms-linear-gradient(top, #E7E7E7, #FFF);
background: url("../images/menu/blue_led.png") no-repeat right -37px, -webkit-linear-gradient(top, #E7E7E7, #FFF);
background: url("../images/menu/blue_led.png") no-repeat right -37px, linear-gradient(top, #E7E7E7, #FFF);
}

I decided to use a default image (blue led graphic) in case no unique class value has been added. The styling for a green led graphic would look like this.

#your-nav-id li.green a {
background: url("../images/menu/green_led.png") no-repeat right -37px, -moz-linear-gradient(top, #E7E7E7, #FFF);
background: url("../images/menu/green_led.png") no-repeat right -37px, -ms-linear-gradient(top, #E7E7E7, #FFF);
background: url("../images/menu/green_led.png") no-repeat right -37px, -webkit-linear-gradient(top, #E7E7E7, #FFF);
background: url("../images/menu/green_led.png") no-repeat right -37px, linear-gradient(top, #E7E7E7, #FFF);
}

Now any menu item with a class value of ‘green’ will display the green led graphic.

There are other various properties that can be used to enhance the final result but this is just a sample of what can be done using ‘CSS Classes’ to make each menu item independent from the others.

Tagged:

Design, Development, and Creative Interests