WordPress.org

Plugin Directory

Menu Image

Adds a field to load the image in a menu item and displays the image inside the link in the menu before the text. Now WPML compliant.

How to wrap menu link text in `span` html element

Menu link text is already wrapped in span.menu-image-title.

How to add another size for the image?

To add a new size (or remove an old one) add a function to the menu_image_default_sizes filter. For example

<?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;

});
?>

How to make hovered image visible on current page of menu item?

Add this link to style.css

.menu-item.current-menu-item > a.menu-image-hovered img.hovered-image {
  opacity: 1;
}

If you have problem with srcset image problem on WordPress version >= 4.4 and Azure hosting

If you srcset property look like this:

<img width="36" height="36" src="http://static.mywebsite.com/website/myaction_express_menu_icon-36x36.png" class="attachment-menu-36x36 size-menu-36x36" alt="myaction_express_menu_icon" srcset="http://www.mywebsite.com/wp-content/uploads/D:homesitewwwroot/wp-content/uploads/myaction_express_menu_icon-50x50.png 50w, http://www.mywebsite.com/wp-content/uploads/D:homesitewwwroot/wp-content/uploads/myaction_express_menu_icon-75x75.png 75w, http://www.mywebsite.com/wp-content/uploads/D:homesitewwwroot/wp-content/uploads/myaction_express_menu_icon-24x24.png 24w, http://www.mywebsite.com/wp-content/uploads/D:homesitewwwroot/wp-content/uploads/myaction_express_menu_icon-36x36.png 36w, http://www.mywebsite.com/wp-content/uploads/D:homesitewwwroot/wp-content/uploads/myaction_express_menu_icon-48x48.png 48w, http://www.mywebsite.com/wp-content/uploads/D:homesitewwwroot/wp-content/uploads/myaction_express_menu_icon.png 80w" sizes="(max-width: 36px) 100vw, 36px">

Then you can disable srcset (add it to your function.php):

/**
 * Fix for broken images on azure & wordpress 4.4
 * @see https://wordpress.org/support/topic/wordpress-adding-absolute-paths
 */
add_filter( 'wp_calculate_image_srcset', '__return_false' );

Requires: 3.5.1 or higher
Compatible up to: 4.4.2
Last Updated: 1 month ago
Active Installs: 30,000+

Ratings

5 out of 5 stars

Support

4 of 14 support threads in the last two months have been marked resolved.

Got something to say? Need help?

Compatibility

+
=
Not enough data

0 people say it works.
0 people say it's broken.

100,2,2 100,2,2 100,2,2
100,2,2
100,2,2
100,1,1
100,2,2
100,1,1
100,1,1 100,1,1 100,1,1 100,3,3
100,1,1
100,1,1 100,1,1
100,2,2
100,4,4
100,2,2
100,1,1 100,1,1
100,1,1
100,1,1 100,3,3 100,1,1
100,1,1
60,5,3