How to Add Images in Custom Menu of WordPress Theme


Wordpress custom Menu are one of the most amazing feature available to give us a amazing boost to our wordpress themes. Custom menus  are one of the easiest and sometimes toughest features available.

Once you are through with this menu system, you can do wonderful things. Here in this tutorial we are going to add images in custom menu links of wordpress custom menu system. [like the one in the image given below ]

Images on Custom Menu

This feature automatically enhance your website design – Just compensate and give you a full ability to add some meaningful. – extra links from twitter and facebook, RSS feeds etc .

Step : -1 Grab your Images

First of all you have to decide what you are basically going to add in your custom menu and which type of images are suitable for your link.

In my case I am going to add FACEBOOK, TWITTER, YOUTUBE and RSS feed into my custom menu, so I have collected these four icons of size 24x24px.

Step: 2 Upload Images

Upload your newly grabbed images to upload into your theme image folder. If you are developing a child theme. Make it sure all these images are going into your child theme folder, otherwise a lots of issues may arise to access these images.

Step : 3 Create new Classe for your Text Link

Open your theme’s Style.css file and add the following code at the end of your CSS file

.dabsterFacebook a
{
Background : url ( facebook.png;) no-repeat left center;
}

Step:-4 Custom Menu and Our Custom Class

Now open your wordpress Admin panel -> custom menu and add a new Custom link from the left hand side panel. Add a New link FACEBOOK and under hyperlink menu type your website page on Facebook. Add this link in to your existing custom menu

Now MOVE on your right hand side Pane . Locate Screen option from the top –right position.
Select your newly defined custom link – in my case it is facebook, Click on triangle and a box appears here. Now supply the CSS class defined in your STYLE.CSS file.

Now , save your work and refresh your browser to see the impact of your whole work. Is everything fine ? No, something is missing, because the Text associated with link is now appear on the top of your image.

So its time to tune your Text. Add the following line in your CUSTOM CSS class

Text-indent : -9999px;

Thus your whole class now looks like this

.dabsterFacebook a
{
Background : url ( facebook.png;) no-repeat left center;
Text-indent : -9999px;
}

Save again the changes and refresh your browser. Voila it done. The above CSS property TEXT-INDENT property just hide your link Text and Give you the desired results

Your first image link is ready. Now follow the procedure and add as many image link as you want.

This tutorial has given you an idea how powerful this custom menu system is, its again up to you, how do you use these custom menu classes to customize your wordpress theme menu system.




8 Brilliant Comments - Join Discussion Now!

  1. Kannan says:

    I was looking for a solution to add an image instead of “Home” in the menu. Thanks for sharing this simple tutorial.

  2. VIVEK KUMAR says:

    Another way for adding images to menu without modifying code is..
    just add the img src to menu label field, it’s also has the same effect as the above one…

  3. Hi Rakesh. It is quite nice and informative post. But mu question is in which format we can upload an image (jpg, jpeg, png etc)? Otherwise your post is quite informative. Thanks for sharing it.

  4. anmol says:

    thanks.. i was finding exact solution for this. which you give me. thanks alot

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>