YouTubeBuzz.com - Buy real YouTube video views safe & cheap

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.

Given is the following menu:

Default Twenty Ten menu screenshot

Here is what we WILL have:

Twenty Ten menu with icons - screenshot

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.

    Adding CSS classes screenshot

  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.

    screen-options

    screen-options-css-clsses

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.

Twenty Ten menu with icons - screenshot

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:

Twenty Ten menu with icons and gravatar - screenshot

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

TheThe Promotion - Premium WordPress Theme - Mega 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!

2 Responses to “Adding an Icon to a Menu Item with WordPress”

  1. Melissa says:

    Hey, thanks for taking the time to write this article. It was very helpful to me, as one of my clients just asked me to include icons on their website menu and I wasn’t sure how to do it. I just did it and it worked perfectly!! What a relief. =)

    • TheThe Fly says:

      You are welcome! I am happy this was helpful for you.

Leave a Reply

Captcha Captcha Reload

manahewp

Free Newsletter

Opt-in to benefit from our monthly WordPress Tips, Tricks & Hacks newsletter and get FREE gifts:

  • Our coming soon themes info
  • 101 WP Power Tips (Video)
  • Advanced WP Tips (eBook)

Club Members Say

I really look forward to the release of each new theme. With such an intuitive and interactive back end, customizations are a breeze. My favorite: the color schemes, of course!

Carolyn Moore

As a Best Selling Author and International Therapist my website has become a key to running my busy offices in Sydney, London and New York. I purchased the THETHE Marketing theme as it appeared to be the best one for my practice. During that time my team have needed help with several items and indeed the list began to grow as our people were not that familiar with code.

The technical support, back up and service that we required meant that the staff at THETHE went out of their way to help us. They have been the very best technical support team I have experienced since the Internet arrived... and I have owned many websites over the years and these guys are brilliant.

Every time we contacted them they were there to offer assistance and advice.Thank you guys your service and expertise is remarkable.

Dr Patrick McNally PhD
Author and Philosopher

Testimonials


 


 

Recent Comments

Subscribe to WP Tips & Hacks Newsletter