The “not-so-new-anymore” WordPress 3.0+ custom menu feature is not only extremely useful but is also very powerful. I have already written a few posts about editing and customizing the menu (such as how to highlight current page links) and today I will show you how you can add special classes to your themes so you can easily show custom icons next to your navigation links.
Adding A Home Icon Next To WordPress Homepage Link
In order to better explain how to add icons I will take you through the steps for adding a home type icon next to your homepage link.
Step 1: Download a cool home icon
For the sake of this preview I just went over and downloaded a simple home icon from Finicons.com – link
Step 2: Enable Classes In Your WordPress Menu
By default the WordPress menu doesn’t show the “class” attributes in the menu builder, so hit the “screen options” and make sure it is checked.
Step 3: Add Style To Homepage Link
Now you can browse to or create a homepage link and add a new class to it. I added a class called “home-link-icon”.
Step 4: Add CSS For Home Menu Icon
Now the only thing left is adding the css to your stylesheet to show the icon for the class you just created. Note: Make sure you add the icon downloaded in step 1 into your theme’s images folder.
Sample CSS
.home-link-icon a{
padding-left: 30px !important;
background-image: url(images/home.png);
background-position: left;
background-repeat: no-repeat;
}
Sample Image
Below you can see my css in action in a theme I am currently working on to release for free over at my Free WordPress Themes section. It’s not really positioned perfectly and the icon doesn’t match, but for the sake of this tutorial you can see how it’s supposed to work.
