Adding an Icon to a Menu Item with WordPress

Have you ever wanted to spice up your blog by implementing something that many other blogs don’t have? Well now you can. Here are step-by-step instructions on how to add an icon to your menu items within your WP theme. This is a great little function that will add visibility and style to your blog.

Let’s discuss adding icons to menu items using WP’s standard TwentyTen theme as an example.This is the default theme that WordPress provides you with when you start a new blog, so we wanted to use this theme as our main example.

As you can see from the above example, adding cool little icons to your menu items is a great way to personalize your site, as well as spice it up a little. Follow the simple steps below and you will have icons in your menu items before you know it.

1. Login to your TwentyTen WordPress admin panel and click on the Media link on the left hand side of the page. Once you are in the Media area, simply click on the “add new ” button at the top of the page and upload the icons you want to use.

   For our example we have added icons Home 32x32px and Envelope 24x24px.

2. Open details of the uploaded images and copy their File URLs. In our case they are:

   /wp-content/uploads/2011/03/envelope.png and
   /wp-content/uploads/2011/03/home.png

3. Then go to Appearance/Edit and add some code at the bottom of your CSS file (or use a custom CSS file option if your theme offers you such an option):

   ul > li.home > a,
   ul > li.home > a:hover{
           display:block;
           padding-left:50px !important;
           line-height:36px;
           background-image: url(/wp-content/uploads/2011/03/home.png)!important;
   	background-position:10px center !important;
   	background-repeat:no-repeat !important;
   }
   
   ul > li.email > a,
   ul > li.email > a:hover{
           display:block;
           padding-left:42px !important;
           line-height:28px;
           background-image: url(/wp-content/uploads/2011/03/envelope.png)!important;
   	background-position: 10px center !important;
   	background-repeat:no-repeat !important;
   }
   

4. After you have added code, go to the Appearance\Menus, select your custom menu items Menu and My email and add "home" and "email" classes (with no quotes) to the appropriate items in the CSS Classes text input field. See the screenshots below for a detailed explanation.

   

5. If you do not see it, just click on the Screen Options link at the upper right corner of the window and check CSS Classes checkbox.

   

   

If you followed these instructions, then you now have some very cool and very personable icons located within your menu. This is not something that a lot of WordPress users have, so your site will have something fresh and unique on it.

Interested in taking this process even further? Lets go ahead and add your Gravatar to the About Me menu item.

To begin, go to Gravatar.com website and create your Gravatar if you don’t already have one. Once you have created your Gravatar, get your Gravatar URL that contains your Hash. It should look like this:

http://www.gravatar.com/avatar/27883a7ef68722b9ae2dcfb9679b9348

To set your avatar size to 32x32px just add ?s=32 to that URL like the example below:

http://www.gravatar.com/avatar/27883a7ef68722b9ae2dcfb9679b9348?s=32

Refer to Gravatar docs to find your hash and URL. Then Add to the theme CSS:

ul > li.gravatar > a,
ul > li.gravatar > a:hover{
        display:block;
        padding-left:50px !important;
        line-height:36px;
        background-image: url(http://www.gravatar.com/avatar/9612f6e40110aaafcff8ab3cec54dc6e?s=32) !important;
	background-position: 10px center !important;
	background-repeat:no-repeat !important;
}

Go to Appearance/Menus again and add "gravatar" class to the CSS Classes filed of your About Me menu item. You should have now:

As for now you have added the following code:

ul > li.home > a,
ul > li.home > a:hover{
        display:block;
        padding-left:50px !important;
        line-height:36px;
        background-image: url(/wp-content/uploads/2011/03/home.png)!important;
	background-position:10px center !important;
	background-repeat:no-repeat !important;
}

ul > li.email > a,
ul > li.email > a:hover{
        display:block;
        padding-left:42px !important;
        line-height:28px;
        background-image: url(/wp-content/uploads/2011/03/envelope.png)!important;
	background-position: 10px center !important;
	background-repeat:no-repeat !important;
}
ul > li.gravatar > a,
ul > li.gravatar > a:hover{
        display:block;
        padding-left:50px !important;
        line-height:36px;
        background-image: url(http://www.gravatar.com/avatar/9612f6e40110aaafcff8ab3cec54dc6e?s=32) !important;
	background-position: 10px center !important;
	background-repeat:no-repeat !important;
}

Let’s optimize it by grouping similar specifications for every menu level:

ul > li.home > a,ul > li.home > a:hover, ul > li.gravatar > a,ul > li.gravatar > a:hover {
        display:block;
        padding-left:50px !important;
        line-height:36px;
        background-image: url(/wp-content/uploads/2011/03/home.png)!important;
	background-position:10px center !important;
	background-repeat:no-repeat !important;
}
ul > li.home > a,ul > li.home > a:hover{ background-image:url(/wp-content/uploads/2011/03/home.png)!important;}
ul > li.gravatar > a,ul > li.gravatar > a:hover{ background-image:url( http://www.gravatar.com/avatar/9612f6e40110aaafcff8ab3cec54dc6e?s=32)!important;}

ul > li.email > a,ul > li.email > a:hover{
        display:block;
        padding-left:42px !important;
        line-height:28px;
        background-image: url(/wp-content/uploads/2011/03/envelope.png)!important;
	background-position: 10px center !important;
	background-repeat:no-repeat !important;
}

We are lucky! It still works!

And do you know that we at TheThe Fly have already automated a process of adding icons to a menu with our themes? Here are some examples of our themes’ menus:

TheThe Promotion Premium WordPress Theme – Menu Screenshot

Adding icons to your WordPress site is just another way for you to separate yourself from other blogs. It is a stylish and fun way to not only stand out from the pack, but to also personalize and customize your site. Enjoy!