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.
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>';