How to add image option in nav menu in wordpress

Just copy and paste below code into your theme's functions.php or your's custom plugin file and change according to your need.

Here is my code for add menu image with different hover image


<?php

class RJ_Menu_Image_Plugin {
   
    public function __construct() {
        add_action( 'init', array( $this, 'init' ) );
        add_filter( 'manage_nav-menus_columns', array( $this, 'manage_nav_menu_image_column' ), 11 );
        add_action( 'admin_head-nav-menus.php', array( $this, 'enqueue_js_for_nav_menu' ) );
        add_filter( 'wp_setup_nav_menu_item', array( $this, 'wp_setup_nav_menu_item_menu_image' ) );
        add_filter( 'walker_nav_menu_start_el', array( $this, 'walker_nav_menu_start_el' ), 10, 4 );
        add_action( 'admin_action_delete-menu-item-image', array( $this, 'admin_action_delete' ) );
        add_action( 'wp_ajax_set-menu-item-thumbnail', array( $this, 'wp_ajax_set_menu_image' ) );
        add_action( 'admin_init', array( $this, 'admin_init' ), 99 );
    }
    public function admin_init() {
        add_filter( 'wp_edit_nav_menu_walker', array( $this, 'menu_image_edit_nav_menu_walker' ) );
    }
    public function init() {
        add_post_type_support( 'nav_menu_item', array( 'thumbnail' ) );
    }
    public function manage_nav_menu_image_column( $columns ) {
        return $columns + array( 'image' => __( 'Image', 'rj_image' ) );
    }
    public function menu_image_edit_nav_menu_walker() {
        return 'Rj_Menu_Image_Walker_Nav_Menu_Edit';
    }
    public function wp_setup_nav_menu_item_menu_image( $item ) {
        if ( !isset( $item->thumbnail_id ) ) {
            $item->thumbnail_id = get_post_meta( $item->ID, '_menu_image_id', true );
        }
        if ( !isset( $item->thumbnail_hover_id ) ) {
            $item->thumbnail_hover_id = get_post_meta( $item->ID, '_menu_image_hover_id', true );
        }
        return $item;
    }
    public function walker_nav_menu_start_el( $item_output, $item, $depth, $args ) {
        $attributes = !empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) . '"' : '';
        $attributes .= !empty( $item->target ) ? ' target="' . esc_attr( $item->target ) . '"' : '';
        $attributes .= !empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) . '"' : '';
        $attributes .= !empty( $item->url ) ? ' href="' . esc_attr( $item->url ) . '"' : '';
        $image_size = 'full';
        $class      = "rj_image-title";
        $image = '';
        if ( $item->thumbnail_hover_id ) {
            $hover_image_src = wp_get_attachment_image_src( $item->thumbnail_hover_id, $image_size );
            $margin_size     = $hover_image_src[ 1 ];
            $image           = "<span class='rj_image-hover-wrapper'>";
            $image .= wp_get_attachment_image( $item->thumbnail_id, $image_size, false, "class=rj_image {$class}" );
            $image .= wp_get_attachment_image(
                $item->thumbnail_hover_id, $image_size, false, array(
                    'class' => "hovered-image {$class}",
                    'style' => "margin-left: -{$margin_size}px;",
                )
            );
            $image .= '</span>';;
            $class .= ' rj_image-hovered';
        } elseif ( $item->thumbnail_id ) {
            $image = wp_get_attachment_image( $item->thumbnail_id, $image_size, false, "class=rj_image {$class}" );
            $class .= ' rj_image-not-hovered';
        }
        $item_output = "{$args->before}<a{$attributes} class='{$class}'>";
        $link        = $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $none         = ''; // Sugar.
        $item_output .= vsprintf( '%s<span class="rj_image-title">%s</span>%s', $item_args );
        $item_output .= "</a>{$args->after}";
        return $item_output;
    }
    public function enqueue_js_for_nav_menu() {
        wp_enqueue_script( 'rj_image', get_template_directory_uri().'/js/rj_image.js', array( 'jquery' ) );
        wp_localize_script(
            'rj_image', 'menuImage', array(
                'l10n'     => array(
                    'uploaderTitle'      => __( 'Chose menu image', 'rj_image' ),
                    'uploaderButtonText' => __( 'Select', 'rj_image' ),
                ),
                'settings' => array(
                    'nonce' => wp_create_nonce( 'update-menu-item' ),
                ),
            )
        );
        wp_enqueue_media();
        wp_enqueue_style( 'editor-buttons' );
    }
    public function admin_action_delete() {
        $menu_item_id = (int) $_REQUEST[ 'menu-item' ];
        check_admin_referer( 'delete-menu_item_image_' . $menu_item_id );
        if ( is_nav_menu_item( $menu_item_id )  ) {
            delete_post_meta( $menu_item_id, '_menu_image_id' );
            delete_post_meta( $menu_item_id, '_menu_image_hover_id' );
        }
    }
    public function wp_post_thumbnail_only_html( $item_id ) {
        $default_size = 'full';
        $markup       = '<p class="description description-thin" ><label>%s<br /><a title="%s" href="#" class="set-post-thumbnail button%s" data-item-id="%s" style="height: auto;">%s</a>%s</label></p>';
        $thumbnail_id = get_post_meta( $item_id, '_menu_image_id', true );
        $content      = sprintf(
            $markup,
            esc_html__( 'Menu image', 'rj_image' ),
            $thumbnail_id ? esc_attr__( 'Change menu item image', 'rj_image' ) : esc_attr__( 'Set menu item image', 'rj_image' ),
            '',
            $item_id,
            $thumbnail_id ? wp_get_attachment_image( $thumbnail_id, $default_size ) : esc_html__( 'Set image', 'rj_image' ),
            $thumbnail_id ? '<a href="#" class="remove-post-thumbnail">' . __( 'Remove', 'rj_image' ) . '</a>' : ''
        );
        $hover_id = get_post_meta( $item_id, '_menu_image_hover_id', true );
        $content .= sprintf(
            $markup,
            esc_html__( 'Image on hover', 'rj_image' ),
            $hover_id ? esc_attr__( 'Change menu item image on hover', 'rj_image' ) : esc_attr__( 'Set menu item image on hover', 'rj_image' ),
            ' hover-image',
            $item_id,
            $hover_id ? wp_get_attachment_image( $hover_id, $default_size ) : esc_html__( 'Set image on hover', 'rj_image' ),
            $hover_id ? '<a href="#" class="remove-post-thumbnail hover-image">' . __( 'Remove', 'rj_image' ) . '</a>' : ''
        );
        return $content;
    }
    public function wp_post_thumbnail_html( $item_id ) {
        $default_size = 'full';
        $content      = $this->wp_post_thumbnail_only_html( $item_id );
        $content = "<div class='menu-item-images' style='min-height:70px'>$content</div>";
        return $content;
    }
    public function wp_ajax_set_menu_image() {
        $json = !empty( $_REQUEST[ 'json' ] );
        $post_ID = intval( $_POST[ 'post_id' ] );
        if ( !current_user_can( 'edit_post', $post_ID ) ) {
            wp_die( - 1 );
        }
        $thumbnail_id = intval( $_POST[ 'thumbnail_id' ] );
        $is_hovered   = (bool) $_POST[ 'is_hover' ];
        check_ajax_referer( "update-menu-item" );
        if ( $thumbnail_id == '-1' ) {
            if ( $is_hovered ) {
                $success = delete_post_meta( $post_ID, '_menu_image_hover_id' );
            } else {
                $success = delete_post_meta( $post_ID, '_menu_image_id' );
            }
        } else {
            if ( $is_hovered ) {
                $success = update_post_meta( $post_ID, '_menu_image_hover_id', $thumbnail_id );
            } else {
                $success = update_post_meta( $post_ID, '_menu_image_id', $thumbnail_id );
            }
        }
        if ( $success ) {
            $return = $this->wp_post_thumbnail_only_html( $post_ID );
            $json ? wp_send_json_success( $return ) : wp_die( $return );
        }
        wp_die( 0 );
    }
    public function menu_item_custom_fields( $item_id ) { ?>
        <div class="field-image hide-if-no-js wp-media-buttons">
            <?php echo $this->wp_post_thumbnail_html( $item_id ) ?>
        </div>
    <?php
    }
}
$menu_image = new RJ_Menu_Image_Plugin();
require_once(ABSPATH . 'wp-admin/includes/nav-menu.php');
class Rj_Menu_Image_Walker_Nav_Menu_Edit extends Walker_Nav_Menu_Edit {
    public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        global $_wp_nav_menu_max_depth;
        $_wp_nav_menu_max_depth = $depth > $_wp_nav_menu_max_depth ? $depth : $_wp_nav_menu_max_depth;
        ob_start();
        $item_id = esc_attr( $item->ID );
        $removed_args = array(
            'action',
            'customlink-tab',
            'edit-menu-item',
            'menu-item',
            'page-tab',
            '_wpnonce',
        );
        $original_title = '';
        if ( 'taxonomy' == $item->type ) {
            $original_title = get_term_field( 'name', $item->object_id, $item->object, 'raw' );
            if ( is_wp_error( $original_title ) )
                $original_title = false;
        } elseif ( 'post_type' == $item->type ) {
            $original_object = get_post( $item->object_id );
            $original_title = get_the_title( $original_object->ID );
        }
        $classes = array(
            'menu-item menu-item-depth-' . $depth,
            'menu-item-' . esc_attr( $item->object ),
            'menu-item-edit-' . ( ( isset( $_GET['edit-menu-item'] ) && $item_id == $_GET['edit-menu-item'] ) ? 'active' : 'inactive'),
        );
        $title = $item->title;
        if ( ! empty( $item->_invalid ) ) {
            $classes[] = 'menu-item-invalid';
            /* translators: %s: title of menu item which is invalid */
            $title = sprintf( __( '%s (Invalid)' ), $item->title );
        } elseif ( isset( $item->post_status ) && 'draft' == $item->post_status ) {
            $classes[] = 'pending';
            /* translators: %s: title of menu item in draft status */
            $title = sprintf( __('%s (Pending)'), $item->title );
        }
        $title = ( ! isset( $item->label ) || '' == $item->label ) ? $title : $item->label;
        $submenu_text = '';
        if ( 0 == $depth )
            $submenu_text = 'style="display: none;"';
        ?>
        <li id="menu-item-<?php echo $item_id; ?>" class="<?php echo implode(' ', $classes ); ?>">
            <dl class="menu-item-bar">
                <dt class="menu-item-handle">
                    <span class="item-title"><span class="menu-item-title"><?php echo esc_html( $title ); ?></span> <span class="is-submenu" <?php echo $submenu_text; ?>><?php _e( 'sub item' ); ?></span></span>
                    <span class="item-controls">
                        <span class="item-type"><?php echo esc_html( $item->type_label ); ?></span>
                        <span class="item-order hide-if-js">
                            <a href="<?php
                                echo wp_nonce_url(
                                    add_query_arg(
                                        array(
                                            'action' => 'move-up-menu-item',
                                            'menu-item' => $item_id,
                                        ),
                                        remove_query_arg($removed_args, admin_url( 'nav-menus.php' ) )
                                    ),
                                    'move-menu_item'
                                );
                            ?>" class="item-move-up"><abbr title="<?php esc_attr_e('Move up'); ?>">&#8593;</abbr></a>
                            |
                            <a href="<?php
                                echo wp_nonce_url(
                                    add_query_arg(
                                        array(
                                            'action' => 'move-down-menu-item',
                                            'menu-item' => $item_id,
                                        ),
                                        remove_query_arg($removed_args, admin_url( 'nav-menus.php' ) )
                                    ),
                                    'move-menu_item'
                                );
                            ?>" class="item-move-down"><abbr title="<?php esc_attr_e('Move down'); ?>">&#8595;</abbr></a>
                        </span>
                        <a class="item-edit" id="edit-<?php echo $item_id; ?>" title="<?php esc_attr_e('Edit Menu Item'); ?>" href="<?php
                            echo ( isset( $_GET['edit-menu-item'] ) && $item_id == $_GET['edit-menu-item'] ) ? admin_url( 'nav-menus.php' ) : add_query_arg( 'edit-menu-item', $item_id, remove_query_arg( $removed_args, admin_url( 'nav-menus.php#menu-item-settings-' . $item_id ) ) );
                        ?>"><?php _e( 'Edit Menu Item' ); ?></a>
                    </span>
                </dt>
            </dl>
            <div class="menu-item-settings" id="menu-item-settings-<?php echo $item_id; ?>">
                <?php if( 'custom' == $item->type ) : ?>
                    <p class="field-url description description-wide">
                        <label for="edit-menu-item-url-<?php echo $item_id; ?>">
                            <?php _e( 'URL' ); ?><br />
                            <input type="text" id="edit-menu-item-url-<?php echo $item_id; ?>" class="widefat code edit-menu-item-url" name="menu-item-url[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->url ); ?>" />
                        </label>
                    </p>
                <?php endif; ?>
                <p class="description description-thin">
                    <label for="edit-menu-item-title-<?php echo $item_id; ?>">
                        <?php _e( 'Navigation Label' ); ?><br />
                        <input type="text" id="edit-menu-item-title-<?php echo $item_id; ?>" class="widefat edit-menu-item-title" name="menu-item-title[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->title ); ?>" />
                    </label>
                </p>
                <p class="description description-thin">
                    <label for="edit-menu-item-attr-title-<?php echo $item_id; ?>">
                        <?php _e( 'Title Attribute' ); ?><br />
                        <input type="text" id="edit-menu-item-attr-title-<?php echo $item_id; ?>" class="widefat edit-menu-item-attr-title" name="menu-item-attr-title[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->post_excerpt ); ?>" />
                    </label>
                </p>
                <p class="field-link-target description">
                    <label for="edit-menu-item-target-<?php echo $item_id; ?>">
                        <input type="checkbox" id="edit-menu-item-target-<?php echo $item_id; ?>" value="_blank" name="menu-item-target[<?php echo $item_id; ?>]"<?php checked( $item->target, '_blank' ); ?> />
                        <?php _e( 'Open link in a new window/tab' ); ?>
                    </label>
                </p>
                <p class="field-css-classes description description-thin">
                    <label for="edit-menu-item-classes-<?php echo $item_id; ?>">
                        <?php _e( 'CSS Classes (optional)' ); ?><br />
                        <input type="text" id="edit-menu-item-classes-<?php echo $item_id; ?>" class="widefat code edit-menu-item-classes" name="menu-item-classes[<?php echo $item_id; ?>]" value="<?php echo esc_attr( implode(' ', $item->classes ) ); ?>" />
                    </label>
                </p>
                <p class="field-xfn description description-thin">
                    <label for="edit-menu-item-xfn-<?php echo $item_id; ?>">
                        <?php _e( 'Link Relationship (XFN)' ); ?><br />
                        <input type="text" id="edit-menu-item-xfn-<?php echo $item_id; ?>" class="widefat code edit-menu-item-xfn" name="menu-item-xfn[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->xfn ); ?>" />
                    </label>
                </p>
                <?php
                // This is the added section
                do_action( 'wp_nav_menu_item_custom_fields', $item_id, $item, $depth, $args );
                // end added section
                ?>
                <p class="field-description description description-wide">
                    <label for="edit-menu-item-description-<?php echo $item_id; ?>">
                        <?php _e( 'Description' ); ?><br />
                        <textarea id="edit-menu-item-description-<?php echo $item_id; ?>" class="widefat edit-menu-item-description" rows="3" cols="20" name="menu-item-description[<?php echo $item_id; ?>]"><?php echo esc_html( $item->description ); // textarea_escaped ?></textarea>
                        <span class="description"><?php _e('The description will be displayed in the menu if the current theme supports it.'); ?></span>
                    </label>
                </p>
                <p class="field-move hide-if-no-js description description-wide">
                    <label>
                        <span><?php _e( 'Move' ); ?></span>
                        <a href="#" class="menus-move menus-move-up" data-dir="up"><?php _e( 'Up one' ); ?></a>
                        <a href="#" class="menus-move menus-move-down" data-dir="down"><?php _e( 'Down one' ); ?></a>
                        <a href="#" class="menus-move menus-move-left" data-dir="left"></a>
                        <a href="#" class="menus-move menus-move-right" data-dir="right"></a>
                        <a href="#" class="menus-move menus-move-top" data-dir="top"><?php _e( 'To the top' ); ?></a>
                    </label>
                </p>
                <div class="menu-item-actions description-wide submitbox">
                    <?php if( 'custom' != $item->type && $original_title !== false ) : ?>
                        <p class="link-to-original">
                            <?php printf( __('Original: %s'), '<a href="' . esc_attr( $item->url ) . '">' . esc_html( $original_title ) . '</a>' ); ?>
                        </p>
                    <?php endif; ?>
                    <a class="item-delete submitdelete deletion" id="delete-<?php echo $item_id; ?>" href="<?php
                    echo wp_nonce_url(
                        add_query_arg(
                            array(
                                'action' => 'delete-menu-item',
                                'menu-item' => $item_id,
                            ),
                            admin_url( 'nav-menus.php' )
                        ),
                        'delete-menu_item_' . $item_id
                    ); ?>"><?php _e( 'Remove' ); ?></a> <span class="meta-sep hide-if-no-js"> | </span> <a class="item-cancel submitcancel hide-if-no-js" id="cancel-<?php echo $item_id; ?>" href="<?php echo esc_url( add_query_arg( array( 'edit-menu-item' => $item_id, 'cancel' => time() ), admin_url( 'nav-menus.php' ) ) );
                        ?>#menu-item-settings-<?php echo $item_id; ?>"><?php _e('Cancel'); ?></a>
                </div>
                <input class="menu-item-data-db-id" type="hidden" name="menu-item-db-id[<?php echo $item_id; ?>]" value="<?php echo $item_id; ?>" />
                <input class="menu-item-data-object-id" type="hidden" name="menu-item-object-id[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->object_id ); ?>" />
                <input class="menu-item-data-object" type="hidden" name="menu-item-object[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->object ); ?>" />
                <input class="menu-item-data-parent-id" type="hidden" name="menu-item-parent-id[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->menu_item_parent ); ?>" />
                <input class="menu-item-data-position" type="hidden" name="menu-item-position[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->menu_order ); ?>" />
                <input class="menu-item-data-type" type="hidden" name="menu-item-type[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->type ); ?>" />
            </div><!-- .menu-item-settings-->
            <ul class="menu-item-transport"></ul>
        <?php
        $output .= ob_get_clean();
    }
}
    

Below is my js file rj_image.js

(function ($) {
    $(document).ready(function () {
        var menuImageUpdate = function( item_id, thumb_id, is_hover ) {
            wp.media.post( 'set-menu-item-thumbnail', {
                json:         true,
                post_id:      item_id,
                thumbnail_id: thumb_id,
                is_hover:            is_hover ? 1 : 0,
                _wpnonce:     menuImage.settings.nonce
            }).done( function( html ) {
                $('.menu-item-images', '#menu-item-' + item_id).html( html );
            });
        };

        $('#menu-to-edit')
            .on('click', '.menu-item .set-post-thumbnail', function (e) {
                e.preventDefault();
                e.stopPropagation();

                var item_id = $(this).parents('.field-image').siblings('input.menu-item-data-db-id').val(),
                    is_hover = $(this).hasClass('hover-image'),
                    uploader = wp.media({
                        title: menuImage.l10n.uploaderTitle, // todo: translate
                        button: { text: menuImage.l10n.uploaderButtonText },
                        multiple: false
                    }).on('select', function () {
                        var attachment = uploader.state().get('selection').first().toJSON();
                        menuImageUpdate( item_id, attachment.id, is_hover );
                    }).open();
            })
            .on('click', '.menu-item .remove-post-thumbnail', function (e) {
                e.preventDefault();
                e.stopPropagation();

                var item_id = $(this).parents('.field-image').siblings('input.menu-item-data-db-id').val();
                menuImageUpdate( item_id, -1, $(this).hasClass('hover-image') );
            });
    });
})(jQuery);