Following unexpected warm response from users of my latest plugin, Nav Menu Images, I decided to write a tutorial about advanced usage for developers.
Nav Menu Images uses filters of core WordPress nav menu template to change default content display. Since default content uses filter the_title, which is common in WordPres and used for filtering post titles, our filter is registered immediately before this filter is used and deregistered immediately after it’s used.
If you want to disable this behavior, and display images differently, you should set nmi_filter_menu_item_content filter to false, the easiest way which is with this line:
add_filter( 'nmi_filter_menu_item_content','__return_false' );
Now, if you still want to use default behavior but want to filter default content, you should use filter nmi_menu_item_content. This filter passes three arguments: the content that should be filtered, ID of a current item, and original content.
Since nav menu item is basically a WordPress post of nav_menu_item post type, you can use WordPress post functions to get item’s data. As said above, Nav Menu Images is already using the_title filter to display it’s content, so you can’t use get_the_title() function to get item’s title (which is called Navigation Label in UI), but you don’t need it since title is already passed by third argument, $original_content.
By default, Nav Menu Images displays just uploaded image of current item. But lets say that we want to display title also. In example below, we are displaying title after image, wrapped by our custom CSS class:
function md_nmi_custom_content( $content, $item_id, $original_content ) {
$content = $content . '<span class="page-title">' . $original_content . '</span>';
return $content;
}
add_filter( 'nmi_menu_item_content', 'md_nmi_custom_content', 10, 3 );In second example, we are showing item’s description after image. Description is name of a field that will be shown in UI only if it’s checked under Screen Options, and it’s stored in post_content database field, so you can use function get_post_field() to get it’s value:
function md_nmi_custom_content( $content, $item_id, $original_content ) {
$content = $content . '<span class="page-description">' . get_post_field( 'post_content', $item_id ) . '</span>';
return $content;
}
add_filter( 'nmi_menu_item_content', 'md_nmi_custom_content', 10, 3 );I hope this tutorial is a good starting point and that it solves some questions about customizing Nav Menu Images output. If you have any different example you made, please share in comments.
Hi Milan, i have a question about your plug-in.
I’m a beginner with wordpress and PHP,i create a function like wp_nav_menu, into this function i want to get the URL of the image of menu item. How can i do this?
I hope that you can hel me!
Thanks!
You could have already seen that in the plugin itself, but you should you function
get_the_post_thumbnail( $item_id, 'full' ), where$item_idis an ID of menu item.Hi!
I´m new to using functions … How Do I use these function settings?
Thank you.
Niclas
You need to learn PHP and WordPress.
Hi,
I installed the plugin, but there is no option in the back end to upload or add images. The plugin is activated, but I don’t see any new field in the custom menu area where I can upload my images. Has anyone else had this problem?
Have you saved you menu before? After you add items to your menu, you need to save menu first before being able to upload images.
hai nice plugin, but i want to ask this problem,
how to fix this problem
Warning: Missing argument 3 for Nav_Menu_Images::register_menu_item_filter() in /home/xxxx/public_html/wp-content/plugins/nav-menu-images/nav-menu-images.php on line 195
you can check my web in http://jack-bear.com/
Please help thanks
Have you seen this comment? Please try it and tell me results. Also, if possible, tell me what PHP version server is using.
Hi. I as well have this same problem. “I installed the plugin, but there is no option in the back end to upload or add images. The plugin is activated, but I don’t see any new field in the custom menu area where I can upload my images.” I see your fix but in my coding there are not line numbers to know where to put the suggested code above. I will try it and let you know if you can let me know in the code I can put it without the direction of a line number. Thanks so much.
Follow up, I counted to line 195 and placed the code there and received an error when trying to update the code.
Melanie, same question as for Jim: Have you saved you menu before? After you add items to your menu, you need to save menu first before being able to upload images.
Please look over at screenshots if you’re unsure how using of this plugins backend looks like.
Many thanks for this, exactly what I was looking for. Great work on the plugin.
I’ve donated a few euros of thanks, please keep up the good work!
I want to print menu title with image what can i do?
By the way this plugin is awesome…… Thanks…
Just look to code examples I wrote in this post.
I am also trying to get the menu title with the image. I followed your code but it puts the title right next to the image. I need it to be below the image. Can you advise me on how to do this? Thanks!
You need to know PHP and HTML a bit…
Instead of
$content = $content . '<span class="page-title">' . $original_content . '</span>';use
$content = $content . '<br /><span class="page-title">' . $original_content . '</span>';Hi,
Thanks for this awesome plugin! Is there anyway to have 3 separate images for each menu item? For example, an image for the menu item, another image for the menu item in the “active” state and another image for the menu item in the “hover” state. It seems there’s only one option at the moment and when I try to add another image, it overrides the original image. If you could provide the code for this that I could add to the plugin that would be great.
@Dorothy: This was added in version 3.0 of plugin. Please have a look at instructions.
Thanks, it worked as expected.
How do I change the width of the image in the menu item, and how do I remove the border? Great and easy plugin, otherwise… Would be great to make these changes right on upload of the navigation image.
You can edit image inside of WordPress to make it size you need. Border is probably because of themes, this plugin doesn’t have any styles.
Hello again. I’m very happy with your plugin and will get back with you after I finish up this web site.
In the meantime, I’m hoping you can help me figure out how to have my Nav Menu Images menu ‘auto resize’ to the various screens. I’ve been going round-and-round and the solution, I think, is to create a seperate CSS sheet with different size images for each screen size. The site is Responsive and I have Viewport enabled too.
I’ve been working on this with CSS and haven’t found my solution yet. This may relate to Emily’s question above…or not. Can you give me a solution or insight? Here is the site so far: http://goo.gl/Ox1X24
thanks again!
You just need to create responsive styles as you would for any other image element. If you need help, I provide custom development support.
How can I get url of the image as background-image?
Thanks
If you look at plugin’s source code, you’ll find how it’s done so you can base your code on that.
thks
Bonjour,
j’ai un probleme : Warning: Missing argument 3 for Nav_Menu_Images::register_menu_item_filter() in /homez.714/digitalgq/www/wp-content/plugins/nav-menu-images/nav-menu-images.php on line 2687
Comment regler ca ?
This is an error reproduced by several users but I can’t reproduce it so I can’t fix it. I need access to server to figure out why is this happening.
Thank you very much, the plugin works perfectly but, how to show the title up the image? I don’t know the php syntax and don’t figure out how to place the $content after the span in $content = $content . ” . $original_content . ”;
Sorry I know, designers sucks 🙂
Regards.
The plugin is working great on all browsers except Safari. I have a logo in place of the Home page navigation. In Safari the image is dipping down behind the content instead of centering vertically in the header.
Has anyone else experienced this? I am not finding any solutions out there.
platform: wordpress 3.8.1
theme: headway 3.6.2
Thanks!
– Amanda
Could you tell us where in your code we should drop the extra functions and filter?
I wrote another post about this topic.