Adding an Image to the WordPress Menu

I was asked to add an image in the WordPress menu instead of the page or link words.

My client asked – I’d like the links to be the relevant icons rather than the text. Can you do it?

Of course I can I replied, wondering what approach I was going to take.

In this case the image was to replace the words from a custom link, not one of the pages.

How do you add an image rather than text to the WordPress menu?

Is there an option within the menu to do so?

No. Not by default. The types available are:

  • Pages
  • Posts
  • Custom Links
  • Categories

I checked the options under the Custom Links. Only the link URL and Link Text were showing. Wistfully, I expanded the Screen options, at the top of the page perhaps there was something useful, like when looking to add a target blank to a menu link. Nothing helpful there, much as I had expected.

I read about recommendations to use a custom plugin – not really the route I wanted to go down.

Replace or modify the menu, with code for hooks in the functions.php file of the menu could be an option.

Again I was hoping to avoid this route, although a simple additional function in the functions.php file I may have been agreeable to.

Having reached this point – what was my answer?

Simple!

I thought about what I was aiming to achieve.

I pasted in the full reference for the image code right from the less than sign to the greater than sign.

Done. It worked!

Sometimes code added like this doesn’t work, it being sanitised to prevent unwanted actions. But not in this case.

After considering some options and a read around on the internet I chose to paste the image code directly into the text field in place of the text.