21 Feb 2017

How to Add Images in Navigation Menus in WordPress

As you begin to read every word on this post, I want you not to pay any attention to all the banners on this website because I don’t want  you to click any of them today but you can click on them by tomorrow. There’s a reason why I said you shouldn’t click on any of the banners on this website and I’ll explain to you later in this post.


In the meantime, I wanted to teach you something really cool and if you’ve been looking for a way to add images in your navigation menus in WordPress, this article is going to be useful to you and if you find this to be helpful, please do let me know in the comments that this was helpful to you. Make sense?

So, without any further ado let’s roll our sleeves and get to work.

In order to add images in navigation menus in WordPress, here’s what you need to do – Install and activate the Menu Image plugin and Once you’re done doing that, the next thing you need to do is to go to Appearance >> Menus.

Now, once it opens up for you, you’ll see ‘Set  Image’ button, click on it and upload your desired images to your menus.

menu1

You can also choose an hover image so that when a mouse is moved over any of the navigation menus the image will change, so to speak. But in order to choose an hover image you have to make sure that those navigation menus already have their navigation images.

menu2

Don’t forget to click on the ‘Save changes’ button.

Also, the plugin automatically create three image sizes of 24 x 24, 36 x 36, and 48 x 48 pixels. You can also choose to display only images as menu if you want to.

Inserting Your Own Image Size

You can decide to insert your own image size if you’re not okay with the sizes above. How can you achieve this? You can do that by adding the below code to your functions.php file;

[php]
add_filter( 'menu_image_default_sizes', function($sizes){

// remove the default 36x36 size
unset($sizes['menu-36x36']);

// add a new size
$sizes['menu-50x50'] = array(50,50);

// return $sizes (required)
return $sizes;

});
[/php]

Conclusion

Obviously, there are other ways by which one can add images to navigation menus in WordPress but with what I have done above, adding images to navigation menus should be a breeze to you. Also, let us know in the comments if you have other ways of adding images to navigation menus in WordPress.

I want to give you other great articles on How to Add Images in Navigation Menus in WordPress. Check the below links out:

If you liked this article, then please subscribe to my YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Leave a Reply

Your email address will not be published. Required fields are marked *