How to Add Images to Menu Items in WordPress

I’ve got good news.

Adding images to menu items is surprisingly simple.

Normally, adding images would require an understanding of code. But thanks to one handy plugin, you don’t need to know the first thing about code.

In fact, this solution is simple as the regular menu editor, and it lets you add images just like this:

Example of menu image icon on site

In this post, discover a plugin that allows you to add images to any of your menu items, and learn how to use it on your site.

How to add images to menu items

To add images to your menu, download and install the Menu Image plugin.

Menu Image

This plugin allows you to add an image to any menu item, and control all aspects of the style including the image position and size.

Once activated, visit your Menus page (Appearance > Menus), and click the drop-down arrow on a menu item.

Drop-down button

Don’t have a menu yet? You may need to create a custom menu first.

This reveals the settings for the menu item. After installing Menu Image, you’ll see an additional set of options for adding an image.

Configuration options for the menu image
Upload an image, change the hover state, choose a size, and position it with Menu Image

As an example, I’m going to use this small person icon for the About menu item:

About icon

To add the image, click the Set image button and you’ll see the familiar Media Library popup where you can upload a new image or select an existing one.

The button for setting an image

Once you’ve added your image, you’ll see a preview in the menu item editor.

Preview of the image

Here’s how that looks in the menu of the Morning theme:

Example of menu image icon on site

Further customizing images

In addition to adding an image, you can position it above, below, before, or after the menu item. You can also show a different image when a visitor hovers over the menu item, which is especially useful for color changes.

As for the size of the image, you have the four image sizes WordPress creates, plus three new sizes added by Menu Image. The sizes available are:

  • Original size
  • Thumbnail
  • Medium
  • Large
  • 24×24
  • 36×36
  • 48×48

The dimensions of the thumbnail, medium, and large sizes can be set in the Media settings menu (Settings > Media).

Tips for using Menu Image effectively

Plan a set of similar looking images for your menu first, so your menu will have a cohesive aesthetic. I added one icon in my example to illustrate the plugin’s use, but I’d recommend adding an image to all menu items or none.

You may need to resize your image a few times until it looks right in the menu. If you don’t have a graphics editor of choice, check out GIMP (free) or Sketch ($99 Mac only).

Lastly, use transparent PNG images if you can. Showing a big square around the icon isn’t going to look good on any menu.

Adding images to your menus

The Menu Image plugin makes it easy for anyone to add images to their menu items. You don’t need to know any PHP or CSS to include stylish icons in your menu.

Do you have any questions about adding or styling images in your menu? Leave a comment below.

Related Posts

8 Comments
  1. Help..!! Can we used NXTGen gallary for image uploading in menus..?

    • Hi Amanda,

      I don’t think this is a feature available in the Menu Image plugin. The images need to be sourced from the Media Library.

  2. yeah…!!
    Thanks for helping me…!!
    Cheers..!!

  3. Kate Kate

    The above feature doesn’t actually work. I wanted the images to sit above the text and what happens is that it sits to the side (left) still.

    • Hey Kate,

      I’m sorry to hear it’s not working for your menu. This may be due to a styling conflict with your theme. Try getting in touch with the theme developer and check if they can help you with a CSS tweak to reposition the images.

  4. Hey, can you please tell me is there any plugin to upload video..?

    • Hi Amanda,

      There are quite a few video plugins available, but I’m not aware of any that can add video into the menu or with the menu items.

  5. Nice tips for adding Images on WordPress website, I am a Junior WordPress Developer, Your blog helps me to learn many things. Thanks for sharing.

Comments are closed.