How to use images in native WordPress 3.0+ Menus

While redesigning my Pretty Tastes Better site recently, I decided I wanted to put my social media buttons in the top navigation bar. The theme I’m using there, Mingle, allows for two different Menus in the top nav bar – one on the left and one on the right.

Naturally, I have my actual navigation links on the left – Home, About, Contact, etc. So the right side was the perfect place to put my social media buttons. However, the WordPress native menu system is set up to use word links, not images. I had a feeling, though, that with enough chimping around, I could make it happen.

Turns out, it is very easy to use images in the WordPress native menu system! If you’d like to do it too, here’s how:

  1. Obviously, login to your WordPress admin screen.
  2. Go to Appearance>>Menus.
  3. Click on the Screen Options button at the top right of your screen.
  4. Under Show Advanced Menu Properties, make sure the CSS Classes box is checked, then click the Screen Options button again to close the box.
  5. Create your menu and save it.
  6. You will see a CSS Classes box in each menu item box. Assign a different name here for each item. For mine, it was “facebook” for my Facebook link, “google” for my Google+ link, etc. (no quotation marks in the CSS Classes box).
  7. Once you have completed your menu and assigned a CSS Class name to each item, make sure you save your changes.
  8. Now go to Media>>Add New and upload the images you wish to use in your menu.
  9. Next, go to your CSS file.  If you are using a child theme, be sure to use that CSS file.  Or if your theme provides a Custom CSS option, use that.  If you are not using any of these options, use your theme’s main CSS file.
  10. For each menu item that you want to use an image instead of text, add the following CSS to your CSS file. Where I have “email” you should put the CSS Class you assigned to the menu item in the CSS Class box. Remember – each item has to have its own class. Note that in the background-image line, you need to put the full url of the image you want to use for that menu item (which you uploaded to the Media Library in step 8, above).
    .email {
    background-image: url(PUT THE FULL URL TO YOUR IMAGE HERE);
    background-repeat: no-repeat;
    }
    .email a {
    opacity: 0.0; }
  11. Save your changes and refresh your page. You should now have images on your menu.

DISCLAIMER: Please note that I am neither a coder nor a web designer. I am not a CSS expert. This method worked for me and hopefully will work for you, too. I am sharing this in the hopes that it will help other non-coders like me who may wish to do this. But if you have CSS challenges, I am not the right person to ask for help. I’m just a chimp and most likely won’t have any idea how to help you!

Leave a Comment:

All fields with “*” are required

Leave a Comment:

All fields with “*” are required