Are you looking for a solution to display WordPress menu images? You’ve landed in the right place.
The default WordPress navigation menu presents plain text with links only. You can totally style this boring menu by adding images or icons to make them more interactive, noticeable, and professional.
In this article, we’ll guide you through 2 ways to make an image-based WordPress menu with and without a plugin.
How to Add Images to Menu Items Using Plugins
There are 2 popular options allowing you to attach icons to your WordPress menu: Menu Image and Menu Icons by Themeisle plugins.
#1 Use Menu Image Plugin
Menu Image receives a great deal of active installs, on over 100 thousand WordPress websites. It assists you in easily creating a noticeable menu with relevant icons.
To get started with the plugin, you first have it ready on your site by going to Plugins → Add New from your WordPress admin dashboard and type “Menu Image” in the keyword box.
After that, click Install Now and Activate to add the plugin to your site.
Now head over to Appearance → Menus from your WordPress admin menu. Here you can click on your desired menu and expand it.
It shows a popup with your icon/image configurations. You can decide the image position: above, below, before, or after the menu. You’re able to hide the image/icon as you wish.
It depends on the type of menu image you add to the menu, which is an image or icon, each comes with different configurations. Pick “Image” and upload your own files to the media library. Settings image on hover is also available.
Plus, Menu Image gives you multiple image site options to choose from. It’s better to pick the 24×24 or 36×36 sizes.
In terms of menu icons, the Menu Image plugin provides you with a list of icons so you can find relevant ones for your menus with ease. For example, the pen icon best suits the Blog section, the man one fits the member login area.
Remember to hit Save Changes to keep all these updates.
#2 Use Menu Icons by Themeisle Plugin
Trusted by over 2K WordPress users worldwide with a 4.5/5-star review, Menu Icons by Themeisle has proved its name as the leading solution in this niche. You can add images to your menu items without having to touch a piece of code.
The installation is similar to what we’ve shown you with the Menu Image plugin. Simply go to Plugins → Add New then find the plugin via the search box and activate it.
Once done, visit your Menus page under the Appearance section in your admin area. Select the menu you plan to add an icon to.
Themeisle icons are revealed from the Dashicons collection so feel free to pick one for your menu. The plugin enables a filter capability letting you sort out different types of icons.
Under the Preview field on your right side, there are settings options to configure your icon, including Hide Label, Position, Vertical Align, and Font Size.
Save the menu and that’s it!
Add Menu Image Using CSS Code
In case you’re familiar with coding and don’t want to apply any plugin which may slow down your site, go for this method. Follow the instructions below to manually add images to your menu items.
First, open Media → Add New and upload images or icons you plan to insert to your menus.
Later, go to Appearance and select Menus under it. You’ll see Screen Options at the top right corner of the page. Click it and enable the CSS Classes option.
Now expand the menu you intend to add an image to and insert a CSS class name for it.
Save the changes and move to the next step of inserting custom CSS to your theme.
- Visit Appearance from your admin area
- Open Stylesheet under Themes Files on your right side
- Enter this code at the end of the file
.homeicon {
background-image: url('http://www.example.com/wp-content/uploads/2018/09/home.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}
Keep in mind to replace http://www.example.com/wp-content/uploads/2018/09/home.png with your own image URL.
Ready to Add Images to Your Menu?
Presenting icons in the WordPress navigation menu attracts visitors’ interest and makes your site more noticeable. You can add menu images manually or install a plugin to simplify the process. The manual method requires some knowledge about coding while Menu Image and Menu Icons by Themeisle plugin can help you handle everything.
There are a few things you should pay attention to before adding icons to your WordPress menus. First, you need a set of images of every menu item ready before making any updates. This reduces your time uploading individual files to the library.
Next, you must create consistency in your menu. In other words, add images to all menu items or don’t use any icon on the menu. Some have illustrations while others don’t, this just makes your site sloppy.
Once finished, you should learn about other ways to work with images effectively in WordPress, i.e. rename images, add text over images, etc.
If you have any concerns about WordPress menu images, drop a line in the comment section so we can help you clarify the issues.
