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 add custom attributes to menu item link (useful for integration with dropdown menus)

Since 2.6.7 you can add custom classes to menu link:

<?php
/**
 * Fix dropdown menu for Flatsome theme.
 *
 * @param array  $attributes An array of attributes.
 * @param object $item      Menu item data object.
 * @param int    $depth     Depth of menu item. Used for padding.
 * @param object $args
 *
 * @return array
 */
public function flatsome_dropdown_fix_menu_image_link_attributes_filter( $attributes, $item, $depth, $args ) {
    if ($args->walker instanceof FlatsomeNavDropdown && $depth === 0) {
        $attributes['class'] .= ' nav-top-link';
    }
    return $attributes;
}
add_filter( 'menu_image_link_attributes', 'flatsome_dropdown_fix_menu_image_link_attributes_filter', 10, 4 );

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.5.3
Last Updated: 6 days ago
Active Installs: 40,000+

Ratings

5 out of 5 stars

Support

2 of 13 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
100,2,2
0,1,0
100,1,1