Menu Image

Description

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 you can upload the second image and set to the mouse over/out effect.
And also change position of title or hide title if need.
And… load images via media uploader!
Now WPML compliant!

Screenshots

  • Admin screen
  • Menu preview in standard twenty-thirteen theme

Installation

  1. Upload menu-image to the /wp-content/plugins/ directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. Go to /wp-admin/nav-menus.php
  4. Edit exist menu item or add new menu item and just upload image than click Save Menu
  5. See your menu on site
  6. (WMPL users only) Goto WPML > WP Menus Sync and click to Sync

FAQ

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:

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

Reviews

Works Fantastic!

I appreciate this one! Was having a heck of a time coding myself. Just saved gobs of time.

Excellent Plugin

It was necessary to make this plugin! We just need to know a little css to customize according to our expectations. The support of zviryatko is reactive in addition, top!

Plugin applies malware/addware to your site.

Use this plugin at your own risk and make sure you have software to verify that nothing is being added to your code.

Good Afternoon,

I just wanted to post a warning about this plugin. I have noticed various malicious scripts being added to one of my sites. After countless hours of tracking I found that Menu Image was the problem code. There seems to be an exploit or hole in your code.
The problem will not be visible if you are logged in as and Admin, but as users go randomly throughout the day javascript is applied to the site. It is random week to week. Below are two examples of what was added by this plugin.
Week 1:
window.onload = function() {
addEvent(document.body, “click”, function() {
console.log(“make pop under”);
makePopunder(“*Removed URL popcash **”);
});

Week 2:
<script src=”** Removed malicious URL//*****.co/loader.js”></script>
The first script added popups to the site, the second tracked server information.

Use this plugin at your own risk and make sure you have software to verify that nothing is being added to your code.

This has been verified by WPEngine.com Sucuri support.

Read all 59 reviews

Contributors & Developers

“Menu Image” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

2.7.0

  • Remove notification plugin. It was not a good idea btw.

2.6.9

  • Revert back php <=5.2 support, https://wordpress.org/support/topic/upgrade-to-wp-453-and-268-and-got-this-error. Reported by @itmnetcom and @cjg79

2.6.8

  • Fix wp_nav_menu_item_custom_fields filter usage https://wordpress.org/support/topic/blocked-on-36×36-image. Reported by @vladimir-slonska
  • Fix php warning in notifier component https://wordpress.org/support/topic/invalid-argument-supplied-for-foreach-in-4. Reported by @susanmarshallva

2.6.7

  • Add menu_image_link_attributes filter, fix bug with menu dropdown in Flatsome theme https://wordpress.org/support/topic/bug-image-menu-dropdown. Reported by @apardo

2.6.6

  • Fix various php errors.

2.6.5

  • Add notification plugin.

2.6.4

  • Fixing a clearing bug for WordPress 4.5+. Thanx @kau-boy

2.6.3

  • Fix php warning ‘Invalid Argument foreach()’ https://wordpress.org/support/topic/invalid-argument-foreach-in-menu-imagephp-line-126. Thanx @majancart

2.6.2

  • Update FAQ to dial with srcset and Azure hosting https://wordpress.org/support/topic/wordpress-adding-absolute-paths. Thanx @GeertvanHorrik

2.6.1

  • Fix php warning https://wordpress.org/support/topic/bug-fix-error-in-the-file-menu-imagephp

2.6

  • Fix bug on attachment page.
  • Add french translation. Thanx @CreativeJuiz

2.5

  • Add above and below title. Thanx @alhoseany
  • Add original image size. Thanx @alhoseany
  • Fix the loss of choices on size and title when updating image by ajax. Thanx @alhoseany
  • Fix hidden title on responsive select menu.

2.4

  • Fix compatibility with some modules and themes to according to this topic
  • Fix Jetpack Phonon frontend bug

2.3

2.2

  • Added grunt-wp-readme-to-markdown npm package for converting readme to markdown for github users.

2.1

2.0

  • Added support of media uploader.
  • Fixed php strict warnings.
  • Added .ico image support, thanks to ivol84

1.3

  • Added ability to set title position, an example: before, after image or hide

1.2

  • Fix styles for hovered image

1.1

  • Added style file with vertical align of menu image item by default
  • Added ability to upload image that which will be replaced on hover
  • Added default image sizes for menu items: 24×24, 36×36 and 48×48