Nav Menu Images is a WordPress plugin (download) that enables uploading of images for nav menu items on a menu edit screen. By default, those images will be displayed instead of text for respective menu items. Note that after upload, you should set an image as featured to be able to display it.
You can also set images that will be displayed only when you hover menu item, or when menu item is of currently displayed page. See screenshots to get an idea how to do this
Link to upload form on nav menu item’s edit screen
Setting featured image from media modal screen
Uploaded image on nav menu item’s edit screen
Setting image used on hover from media modal screen
Developers can use many available filters to make their own way of displaying images, or even create a child class on top of base one. Read a detailed guide for developers.
Although this plugin displays uploaded images out of the box, it will probably not give best possible look, so it’s recommended to create custom CSS styles for affected elements.
Nav Menu Images code is partly based on a code from now defunct plugin Custom Menu Images by Anabelle Handdoek/∞manos s.a.s and a code from plugin Metronet Profile Picture by Ronald Huereca/Metronet Norge AS.
If you are translator, you can translate it to your language and send translations. Currently, only Serbian translation is available.
Nav Menu Images is released under the terms of GNU General Public License. It is completely free so if you find it useful you can give something back to author. Your help could be done by giving donation, translating plugin to your language, sending bugs and suggestions, promoting plugin in blogs, forums social networks, and other websites.
I have error in menu- “Missing argument 3 for Nav_Menu_Images::register_menu_item_filter() (path to my page) on line 195″ what did I do wrong? This error occurs immediately after loading the plugin
What version of WordPress are you using? This shouldn’t happen.
Wordpress 3.4.2
I can’t reproduce this and don’t see a reason for it.
I have the exact same issue as shoy
“Missing argument 3 for Nav_Menu_Images::register_menu_item_filter() (path to my page) on line 195″
http://www.digitalbla.com/Teste/LeoDale
@shoy, @DigitalBlá
Can you, please, try this version, and if still doesn’t works, try this one too and tell me what happens?
You can do this fast by deleting plugin then choosing option to upload plugin, not searching for it.
Same kind of problem, but a bit awkward:
On http://www.larmit.nl/caresse I get:
PHP Warning: Missing argument 2 for Nav_Menu_Images_Admin::_wp_post_thumbnail_html() in E:\larmit.nl\wwwroot\caresse\wp-content\plugins\nav-menu-images\inc\admin.php on line 131
On http://www.caresseboxsprings.nl it works fine! (this site is not visible yet.)
Exactly the same sites, both with WordPress 3.4.2
Hi, just overwritten the plugin with the first version (‘Can you, please, try this version…’ ) with ftp. Seems to work ok now!
Tnx, Henk
Hm, it’s the 1.0 version again. Only difference between my two sites is that I have got the All-in-one-seo-plugin installed at the site with 2.0.
Grtz Henk
Can you please look and tell me are there any differences in PHP versions on servers those two sites are using?
Sorry for the delay, had to put a website online.
The info (I hope it’s usefull):
Server with NavMenuImages 1.0, WP 3.4.2
MySQL
• Server: Localhost via UNIX socket
• Server version: 5.0.77
• Protocol version: 10
• User: ***
• MySQL charset: UTF-8 Unicode (utf8)
Web server
• Apache/2.2.3 (CentOS)
• MySQL client version: 5.0.77
• PHP extension: mysql
phpMyAdmin
• Version information: 3.4.8,
Server with NavMenuImages 2.0, WP 3.4.2
Database server
• Server: Localhost via UNIX socket
• Software: MySQL
• Software version: 5.5.25-log – Source distribution
• Protocol version: 10
• User: ***
• Server charset: UTF-8 Unicode (utf8)
Web server
• Apache/2
• Database client version: libmysql – 5.5.25
• PHP extension: mysqli Documentation
phpMyAdmin
• Version information: 3.5.1
Grtz Henk
Would it show the image and description text… like text under the image?
If not it would be great to have an option to show image and text together..
great work!
Pozdrav!
Only image will be shown. If you want to show anything different, you need to use
nmi_menu_item_contentfilter.Checkout the tutorial I wrote in the meantime.
Turn off automatic swapping of title for image in functions.php:
add_filter('nmi_filter_menu_item_content','__return_false');OR — have image appear BEFORE text in functions.php:
… and then you can use CSS to disable images on all menus, except those you want…
In my case, the same menu appeared in the sidebar and did not NEED images there.
Hi, thanks for this great plugin.
I try to let the text below or above the images related to the titles by adding this code in functions.php, but I can’t… I use the basic theme Twenty Eleven, do you have any idea?
Thanks for your answers…
Juliette, checkout the tutorial I wrote in the meantime.
An idea for you. I don’t know if it’s easy, but can you modify this plugin allowing to upload two pictur for every page: the first one for the menu and the second one for the menu in modality OVER???
What is “modality over”?
He means ‘hover’. I have the same request: can you add an upload for a hover image, please.
Thank you
So that you have two images uploaded or that uploaded image is only used for hovers?
Hi Milan,
Thanks for the great plugin, it works fantastic! I was wondering if there is some news on the hover topic. To answer your last question here: a second image that only appears when hoovered upon the menu item would be a great add!
Cheers,
Bernard.
I’ve released version 3.0 that adds support for hover and active images.
neat plugin. shame I’ve no idea how to add the page title with the
nmi_menu_item_contentfilterI actually plan to write such tutorial, but if you’re into development, you can learn how to use filters in WordPress in general.
cool thanks man. I dove in the deep end and managed to get it working with this:
function nmi_with_title($content) { // Your custom code goes here, between the curly braces return $content . '<span class="page-title">' . get_the_title($item_id) . '</span>'; } add_filter('nmi_menu_item_content','nmi_with_title');actually this is wrong. doh. back to the drawing board
Nigel, checkout the tutorial I wrote in the meantime.
Okay guys I want the image to display before my text in my menu how can i do that I don’t really want to mess with functions.php but if i have to which functions.php are we talking about. are we talking about the one in child theme? and also for something like this how would the css code look like if I may ask I am a beginner trying to learn. please help.
Ramin, the first question is partly answered in the tutorial I wrote in the meantime.
About functions.php, you need to learn how to create and save custom code you make for WordPress. If you’ve built your own custom theme (child or not), it might be a good idea to put your custom code like this into that theme’s function.php file.
Otherwise, you should create a custom plugin for you site, from scratch or by help.
I have social media icons in the header inline. When you reach the homepage on a mobile device you select pages from a popup with radio buttons. However, for the 3 links that are icons/images the radio buttons are present but have no label:
http://www.optometricinsights.com
Again, this is on mobile device only. Same scenario for FF, Android default browser and Opera.
Thanks in advance for any help!
This is happening because responsive design uses those same labels that are visible for regular browsers and since you are using images for socials and no text, there is nothing to be shown. So you need to either use custom filters to display/hide labels of socials, or you need to hide them completely for mobiles.
In either way, this is completely unrelated issue to regular plugin usage and doesn’t cover free support, I’m giving you this detailed answer just because I like how you use my plugin.
Thank you Milan. I appreciate the information.
Hi Milan and thanks for the plugin.
I’m using it on an Artisteer generated theme and, unfortunately, there is a big issue: images won’t show.
I first used the plugin via WordPress INSTALL NOW page – no results and main menu is missing from screen; then I tried the nav-menu-images-1.zip, again no results and missing main menu.
Then I tried nav-menu-images-2.zip: this time menu appears as planned, but no images, only the original text link.
Do you think this could be something somehow related to Artisteer?
Stefano
I don’t understand, does menu appears/disappears in admin section under Appearance, or on the front end of the site? Have you uploaded images through this plugin?
Error “You need to set an image as a featured image to be able to use it as an menu item image”
?? Help me
You haven’t read the tutorial, you need to set uploaded image as featured image in order to use it by this plugin.
Nav Menu Images. Great. Awesome. No other plugin like it.
But, it does not work with the “Better WP Security” plugin which changes the path of the wp-content folder for security reasons. The path to the uploaded image will generate a 404 error. It may not work in a Multi-Site installation either?
As far as I can see, all old uploads won’t work after you change path in Better WP Security, not just for this plugin, so this is not my plugin’s issue. If you update your database with new path it should work, and also new uploads should work immediately.
As for multisite, it should work.
Yes, you are right. The problem seems to have been my write permissions on my .htaccess file. I had them set at 444. But, when I changed them to 644 everything seemed to work for me.
Thanks for the reply.
I have the similar problem with “You need to set an image as a featured image to be able to use it as an menu item image”. could you please tell me how to change images to featured image. i have read your tutorial, but i still couldn’t get it changed to a featured image. thanks.
HI Milan,
I have checked it again. normally there should be an option as “use as featured image” but there was this option next to the “insert into post”. Is there any other way to set the upload picture to feature image? I use PNG format.
Thanks
Edward
With version 2.0 this button is more prominent.
Hey,
thanks for you great plugin!
I would like to display a different image when you are on a particular page (so if you click on “Home” for example, it should be highlighted or underlined) – so you can see what page you are currently on.
Example: http://jakobgasteiger.com
Is this possible?
regards
Mat
This can be done two ways depending what you want to achieve: using CSS (active menu item has class
current-menu-itemthat you can use to customize it) or with very custom solution that would output different image.Thanks for the plugin. Just wondering how to customize the position of the icon on the menu. I need to move the image up. I figure it has to do with the css but an example would be appreciate…or if I can simply edit one of the plugin php files.
Thanks again
I created a custom css class with the following and it worked.
.menu li.ICON {
position:relative;
top:-25px;
}
Hello
great plugin
My question is with file should i change to integrate it in my theme instead of using it as a plugin ??
thanks and great plugin agian
You mean to pack this plugin with your theme? If you are already releasing WordPress themes you should know how to include other libraries with it.
Be careful with naming convention so that theme and plugin don’t block one another. Also please share your work.
Hi, great work with this plugin but I’ve got a problem.. everything was working fine while I was creating my custom menu, the “upload image” button was showing with no problems but suddenly when I created the third button, the field “upload menu item page” vanished and never came back.. Do you have any issue?
Did link disappear from all menu items or only for newly added one? Have you saved you menu before trying to upload? After you add items to your menu, you need to save menu first before being able to upload images.
Thanks for your nice plugin.
I’m using wp 3.5.1 and Elegant Themes’ Lucid theme.
I installed your nice plugin but the upload image option isn’t showing up when expanding the menu item.
What could be wrong? I’ll donate 10 if you help me fix it.
Thanks!
Russ
Have you saved you menu before trying to upload? After you add items to your menu, you need to save menu first before being able to upload images.
I am having the same issue as the first commenter. I am getting this message
:Warning: Missing argument 3 for Nav_Menu_Images::register_menu_item_filter() in /home/content/j/a/b/jaboostudios/html/wordpress/wp-content/plugins/nav-menu-images/nav-menu-images.php on line 198
I want to have an image of the Like US on Facebook logo but this error message keeps coming up ?!?!?
PLEASE HELP I AM VERY CONFUSED
How can I allow the image to appear next to the name of the menu item?
I see this just replaces the name itself, but I’d like to be able to display the name as well as the image.
Is this in the php or css?
Please look over to developers guide.
I would like my image to change to another image on hover/click, how do i go about that?
How do I upload two different images on one menu example (about us) so that when a person click/hover on the tab it changes to another image.
How do i activate the hover effect on the menu. how to upload to images to make them change when a tab is active
i have tried displaying both image and title but its not working, only the page title or image is displayed alone
I’ve released version 3.0 that adds support for hover and active images.
I’m getting 500 Internal server error after uploading a menu image. I tested this in my test blog and its using Swift theme. Please fix this issue.
I don’t see how is this issue related with this plugin, it obviously works for many, including me, and without any more information I can’t fix anything.
Hi Milan,
I am trying to use the new feature(hover and active) but when i select another picture to be used as the hover or active picture, it only shows the image i selected to use as hover/active.
Is extra coding needed to fully use the new feature or should it work instantly?
Greetings, Kasper
There shouldn’t be need for any extra coding, it should work out of the box. Have you by chance clicked on set featured image after you selected hover/active image? You should click that button only when you select default nav menu item image.
I am 80% sure the problem is another plugin i am using to show the title of the menu item(on hover). I did click “Set featured item” but have also tried without. I’ll try to test it out without the other plugin. thanks for the help
Using WordPress 3.5.1, a theme developed with Artisteer 4.1 and Nav Menu Images 3.0. I get the following error message in the menu widget of the vertical nav panel. The top nav panel renders as expected. All I have done is install and activate the plugin, I have not yet added any images.
Nav_Menu_Images::register_menu_item_filter() in /web/docroot/…………./htdocs/cc/wp-content/plugins/nav-menu-images/nav-menu-images.php on line 268.
(note I have removed the domain from the error message file path for security reasons).
This appears not to be an isolated case from reading this blog and the support area on the WordPress website. I don’t want to be editing core files to fix this, can you please sort the plugin.
Thanks
Since I have never reproduced error like this, I really can’t know what is a reason unless looking at place where this is happening.
Hello – I am having trouble like others with the hover function… sorry to be dense and thanks for the plugin which is just what I needed! I seem able to set an image but can’t see a hover option. I have downloaded version 3.0. Thanks for any help you can offer
Denise
You don’t see checkboxes for hover/active on a side like in screenshots above? I really can’t know what is a reason unless looking at place where this is happening.
Hi – no I really don’t see checkboxes for hover/active. I don’t have anything on the right under the box ‘Description’. I’m wondering if it’s because I’m on a PowerPC iMac – have you heard of any other people with a problem seeing the hover options? Thanks
Sorry for jumping in here but I might have the answer: which version of WordPress are you using? The active/hover checkbox shows in the new media uploader used by WP 3.5.x. The checkbox is at the right hand side of the uploader (becomes the media manager once the file is uploaded) when an image is selected (ticked); there is a vertical scrollbar on the right-hand-side of the screen, you will need to scroll it down.
Hi Milan, thank you for adding hover images. It’s a great enhancement. I am having difficulty using them, though, because the hover image selected for one menu item seems to be the one that shows on hover for all tabs in the menu. I’ve tried removing all images then reuploading and choosing them again…. but nothing seems to help.
I’m using WP 3.5.x and the Genesis theme framework with the Dynamik child theme.
Could you add separate upload buttons to the menu editor? I think that might make it easier (more intuitive) to set both the active and hover images for each menu tab.
Thank you, Milan. By the way, where’s your donate button?