Menu Image, Icons made easy

Descripción

Easily add an image or icon in a menu item. Creating a better website menu.
Control the position of the image or icon and also it’s size.

With Menu Image plugin you can do more, check some of the features:

  • Hide Title.
  • Add Image / Icon on the Left of the menu item title.
  • Add Image / Icon on the Right of the menu item title.
  • Add Image / Icon on the Above of the menu item title.
  • Add Image / Icon on the Below of the menu item title.
  • Switch images / icons on mouse over the menu item.

It’s compatible with WPML and no coding knowledge is required.

Related Plugins

  • Mobile Menu: WP Mobile Menu is the best WordPress responsive mobile menu. Provide to your mobile visitor an easy access to your site content using any device smartphone/tablet/desktop.

I need help or I have a doubt, check our Support

Bug reports for Menu Image are welcomed on GitHub. Please note GitHub is not a support forum, and issues that aren’t properly qualified as bugs will be closed.

Capturas de pantalla

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

Instalación

  1. Upload menu-image to the /wp-content/plugins/ directory
  2. Activa el plugin a través del menú de ‘Plugins” en 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)

Use core nav_menu_link_attributes and nav_menu_item_title filters.

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

Opiniones

28 de Septiembre de 2020
Awesome simple, works out of the box plugin. Rui, thank you very much! Keep up the great work.
21 de Agosto de 2020
This plugin was exactly what I needed for a certain style I was trying to achieve on the website I'm building. There was an issue with the title alignment when I wanted it to display above or below the image. The plugin owner fixed the issue for me quickly with good response time. Thank you!
10 de Junio de 2020
After installation, it broke the menu on my twenty seventeen theme when in mobile mode.
Leer los 101 comentarios

Colaboradores & Desarrolladores

“Menu Image, Icons made easy” es software de código abierto. Las siguientes personas han contribuido a este plugin.

Colaboradores

“Menu Image, Icons made easy” ha sido traducido en 6 idiomas. Gracias a los traductores por sus contribuciones.

Traduce & #8220;Menu Image, Icons made easy” a tu idioma.

¿interesado en el desarrollo?

Revisa el código , echa un vistazo al repositorio SVN , o suscríbete al log de desarrollo por RSS .

Historial de cambios

2.9.7

  • Fix – Fix Issue with display title above and below
  • Improvment – Update Freemius SDK to 2.4.0.1

2.9.6

  • Fix – Fix compatibility issue with WordPress 5.4.

2.9.5

  • Fix – Remove unnecessary filter.
  • Fix – Adjust the CSS for title below.

2.9.4

  • Fix – Bug of the duplicated images.

2.9.3

  • New – Add compatibility with Max Megamenu.
  • New – Add new filter to change the markup of the image
  • Fix – Lower the Menu Image options to be below the WordPress Settings.
  • Fix – Update Mobile Menu Link.
  • Fix – Relocate CSS and JS resources.

2.9.2

  • New – Include Freemius framework.
  • New – Settings panel.
  • New – Option to enable/disable image on hover.
  • New – Options to change the custom image sizes.

2.9.1

  • Fix previous broken update. Sorry for that, everyone is mistake.
  • Remove images srcset and sizes attributes.
  • Add autotests on for images view.

2.9.0

  • Update admin part copy regarding to new wp version.
  • Fix support url.
  • Fix php warning.

2.8.0

  • Use core nav_menu_link_attributes, nav_menu_item_title filters to add image and class instead of walker_nav_menu_start_el filter.
  • Drop support of core version < 4.4.0.

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