-
I came across with an issue recently, I was trying to add different classes to each menu link without any success. The new WordPress Custom Menu feature have a lot of different options to play with, let’s see what we’ll do.
- Home
- Advertise
- Contact
- Archives
- About
1. What we’re going to do?
Is very simple, I want a menu with each link containing different icons:
2. WordPress Custom Menus
WordPress 3.0 Custom Menus are a simple but effective new feature of the latest beta version of WordPress. To know more about this new feature read here.
3. The Problem
I need to assign differents CSS classes to each link to add my icons.
4. The Solution
Let’s use the Title Attribute and add it as classes using jQuery to each menu link.
[Update:]
There’s some hidden features in the WordPress Custom Menu and thanks to John O’Nolan I just notice those features, there’s no need of jQuery here, we just need to click in Screen Options to show the hidden options.
You’ll need to specify the name of each individual class using:
5. The CSS
This is just some generic styles to show you how I’ve named my links.
#header ul.navigation li.home {background:url("images/home.png") no-repeat 0 1px transparent;display:block;padding-left:23px}
#header ul.navigation li.home:hover {background-position:0 -16px;color:#535353;border-bottom:1px dotted #535353;}
#header ul.navigation li.about {background:url("images/about.png") no-repeat 0 0px transparent;display:block;padding-left:23px}
#header ul.navigation li.about:hover {background-position:0 -16px;color:#535353;border-bottom:1px dotted #535353;}
#header ul.navigation li.advertise {background:url("images/advertise.png") no-repeat 0 0px transparent;display:block;padding-left:23px}
#header ul.navigation li.advertise:hover {background-position:0 -17px;color:#535353;border-bottom:1px dotted #535353;}
#header ul.navigation li.archive {background:url("images/archive.png") no-repeat 1px 2px transparent;display:block;padding-left:23px}
#header ul.navigation li.archive:hover {background-position:1px -14px;color:#535353;border-bottom:1px dotted #535353;}
#header ul.navigation li.contact {background:url("images/contact.png") no-repeat 0 3px transparent;display:block;padding-left:23px}
#header ul.navigation li.contact:hover {background-position:0 -12px;color:#535353;border-bottom:1px dotted #535353;}
6. jQuery in Action
The solution is pretty simple, we just grab the Title Attribute and add it to the links as a class using the addClass jQuery function.
There’s no need of jQuery to add individual classes, but I’ll leave this code here for reference.
<script type="text/javascript">
$(document).ready(function(){
$('ul.navigation li').addClass(function() { return $(this).attr('title'); });
});
</script>
7. That’s it
Thanks to John O’Nolan for the heads up.
Great post Ivor! I haven’t started playing with 3.0 yet, but looking forward to it!
Cheers.
Thanks Sean, WordPress 3 is really awesome!
and the WordPress Custom Menu is amazingly easy to customize.
This is great for post-installation where someones creating a menu sure, but if you’re creating a theme you need to remember to include something for the ‘default’ that comes up as well or your site’s going to look horrible to those users who get your theme.
But yeah, nice.
WordPress automatically creates the current-item class
Or, click on “screen options” and enable “CSS classes” http://drp.ly/14iT6Q
OH – Geez! lol – Well this feature is too new
thanks for the tip John I’ll update the post.
Thank you! Why on EARTH don’t they have this turned on by default?!
thanks ! this so good ! i had a better menu !
I don’t get it. WordPress 2 already gives you unique classes to do icons with in the navigation. It’s how I did the nave on my site….
Yes but this is using the new WordPress 3.0 Custom Menu feature
amazing!! can’t believe i missed it! thanks
Thanks so much for this! Been trying to customize external links in the menu for days. I was able to specify classes in beta2, but when they released RC1/RC2 I thought they canned the ability. Thanks to you I adjusted my screen options, and voila!
I don´t know where to put the CSS code. I tried in style.css, but it doesn’t work.
Can anyone help me?
(I use WP 3 and twenty ten theme)
Thanks for this post. I wanted to have the last two items on my menu float right, as opposed to left, which is the default. I added a css class “floatright” to the “Contact” page, using the WP 3.0 menu function and added this line to style. css:
.floatright {float: right}
It doesn’t have the intended impact and when I view source I see this:
Contact
What is menu-item, menu-item-type-post, etc.
Any thoughts?
Thanks, Bill
Rats, I see that it didn’t show you the code, but created a link, so here it is, fudged a bit so it doesn’t create a link
Contact
trying one more time
Contact
what about an active state?
Do you know how ‘description’ works?
No Gabriel.
Hello Ivor,
Great article!
however I cant seem to figure out where I put the CSS in order for this to work.
any help would be greatly appreciated.
Thank you
I have exactly the same problem. Could you please update that part of your post because it’s somewhat confusing. I’m trying to do specifically that – yet this is the only tut I’ve found after 4 hours of searching….
What you need to know? You just need to activate the options in the screen option panel
what do we write in the css classes box – the normal and hover class? How?
Thank you so much for this. I was having such a problem customizing the navigation and you made it so much more simple.
I couldn’t find any information on this.
Thanks again.
Hi, Can the new “custom menu” be customized further to make it a dropdosn menu?
Thanks a ton, the note about “Screen Options” just made my day.
Hey Ivor, just to let you know this post has become my bible.
Have been scratching my head off to find a tutorial that explains how to edit WordPress custom menus.
Thanks!
Really Nice Trick to customize the Menus. Thanks John O’Nolan.
Thanks for this post. I entirely agree with what you are saying. I have been talking about this subject a lot lately with my father so may this will get him to see my point of view. Fingers crossed!
I’ve by no means heard of this just before. I’ll definately have to examine individuals out.
I gotta bookmark this site it seems invaluable handy
Great tutorial, I can’t figure out couple things. Can I get class ‘home’ to be added to anchor instead of li element:
from this:
Home
to this:
Home
Thank you.
Great tutorial, I can’t figure out couple things. Can I get class ‘home’ to be added to anchor instead of li element:
from this:
Home
to this:
Home
Thank you.
This is a short tutorial on wordpress menus. It might be helpful:-
add menus to wordpress
This post is more helpful for me. Thanks for posting. Good work
Wow, I can’t believe I missed that in Screen Options, haha. Thanks for the article!
I am currently trying to work out a way to apply the class to the actual link element. I’d like to have a menu item open in a lightbox, but I am having trouble doing so. Any ideas?
This article was a great help it allowed me to add a awesome home button to my website http://www.speedsitting.co.nz check it out if you like it see the source code to see how I achieved it.
Hint: Background Images and a bit of CSS Trickery.
Note the links anchor text too, great way for SEO.
Very nice post. I just stumbled upon your blog and wanted to say that I have truly enjoyed browsing your blog posts. After all I will be subscribing to your rss feed and I hope you write again soon!
When I try this, WordPress is stripping out the CSS meta characters and it’s not working, so this:
#menu-item-1256 {background url:(image.gif);}
…becomes:
menu-item-1256 backgroundurlimagegif
Thanks a lot, Ivor. I came to your site through a Google search looking for a way to place images in the menu, and this is exactly what I needed for my website. (You can have a look at it).
It looks fabulous – thanks a ton!