How to add images and styles to the WordPress custom menu

There are lots of good plugins out there for displaying social media profiles on your site, but what if you want to use your own icons? And you want your client to be able to easily manage the links to these social profiles? The solution is to create a custom menu in WordPress with unique CSS styles assigned to each of those menu items. But how?

Here’s what we worked on: A custom menu with unique icons for Twitter, YouTube and Facebook:

After searching the web for how to add images to the WordPress custom menu, we tried the Custom Menu Images plugin with no success. We even tried some crazy workarounds like trying to put the image path inside the navigation label! WTW?! Crazy, but true. And it didn’t even work in the end. It printed out the character tag < reading the HTML instead of rendering it.

And then, we saw the light! In the form of the Screen Options pull down tab right there in the Custom Menu screen in front of our faces! Well, actually the light came from this post that told us where to look. How did we ever miss it? It was so obvious! Once you know where to look, that is. So here’s what to do:

Go into your Custom Menu (functionality added in WordPress 3.0) under Appearance > Menus
Click on Screen Options in the top right corner of your screen
Check the checkbox next to CSS Styles in the Show Advanced Menu Properties
Create your menu
In your menu item, in the CSS Classes field, enter the name of the CSS style you want to associate with that menu item. Just the name of the class without the period. Ex. “twitterstyle”
Go into your CSS file and add the style and add images and/or styles as you see fit.

That’s it. More coolness that Screen Options can do, Show more pages in your WordPress Dashboard.

Fabrizio T.

Great tip, thank you! 🙂
Nicolas

Didn’t know we had these options. Css classes for menu is very usefull.
Michael

I’m a bit new with custom CSS. It would be really helpful if you could show the rest of the lesson, including exactly what to put in the CSS file and where to insert it into your theme. I know tat where CSS goes in your theme can vary, but give and example like what if it was twenty-ten or twenty-eleven.
johnny

i’m trying to figure out how to add images (more like an avatar or thumbnail) on every menu item …. would i need to create a separate class for each menu item ???? or is there a better way ???
- johnny
  
  its for a mobile menu page …
- Nicolas
  
  You should have something like id=”menu-item-xxx” in the HTML source code on your menu.
  - johnny
    
    negative …. not on the custom menus or menus …. is there another place to see it ??
Pingback: No Children Nessecary | Half-Elf on Tech()
Vikash

Using the custom image plugin screwed my website’s layout. On searching further this post and it made my life easier to restore my site’s layout and requirement for images in menu.

Thanks for it.

How to add images and styles to the WordPress custom menu

Author: Rebecca Markowitz

Read previous post:

QuickTip: Show More Pages in your WordPress Dashboard