Nav Menu Images: Developers Guide

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.

33 thoughts on “Nav Menu Images: Developers Guide


  1. 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!


  2. 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?


  3. 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


  4. 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.


    1. 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.


  5. I want to print menu title with image what can i do?
    By the way this plugin is awesome…… Thanks…


  6. 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!


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


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


  8. 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.


  9. 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!


  10. 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 ?


  11. 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.


  12. 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

Leave a Reply

Comment Guidelines:
  • Your email address will not be published
  • Fields marked with * are required
  • If you want your picture next to comment, open an account at Gravatar
  • If you want to know if someone replied to your comment, check “Notify me of followup comments via e-mail”
  • You can use these HTML tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>