How to Add Image Icons in WordPress Menus without Plugin

How to Add Image Icons With Navigation Menus in WordPress Without Plugin

Do you want to add an image icon in the WordPress Menus? Generally, Beginner webmasters use a plugin. Most webmasters use free themes. So, They don’t have that option.  Only premium WordPress themes have that image icon option. 

In this article, we will show, how to Add Image Icons With Navigation Menus in WordPress Without plugins. We will do it manually with PHP. You don’t need to use plugins for every simple job. 

Adding Custom Fields to WordPress Menu Items: 

After the release of WordPress Version 5.4, WordPress made it easy to build custom Fields in WordPress menu items. It’s released a new hook that will make it easy to add custom fields in menu items. 

The action hooks are 

Wp_nav_menu_item_custom_fields
Wp_nav_menu_item_custom_fields_customize_template

We are going to use the Wp_nav_menu_item_custom_fields action hook for adding custom fields to menu items.

In this example, We are going to create Image URL fields and image size fields.

Use This code for image URL field In function.php:

function wpk_menu_image_icon( $item_id, $item ) {
	$menu_image = get_post_meta( $item_id, '_menu_image_icon', true );
	$menu_image_size = get_post_meta( $item_id, '_menu_image_icon_size', true );
	?>
	<div style="clear: both;">
		 <label for="menu-image-icon-<?php echo $item_id ;?>" style="font-size: 13px; color: #646970;">
		 	<?php _e( "Image Icon Url", 'menu-image-icon' ); ?>
		 </label>
		 <input type="hidden" class="nav-menu-id" value="<?php echo $item_id ;?>" />
		 <div class="logged-input-holder">
		 	<input type="text" name="menu_image_icon[<?php echo $item_id ;?>]" id="menu_image_icon-<?php echo $item_id ;?>" value="<?php echo esc_attr( $menu_image ); ?>" style="width: 100%;">		 	
		 </div>
	</div>

	<div style="clear: both;">
		 <label for="menu_image_icon_size-<?php echo $item_id ;?>" style="font-size: 13px; color: #646970;">
		 	<?php _e( "Image Icon Size", 'menu_image_icon_size' ); ?>
		 </label>
		 <input type="hidden" class="nav-menu-id" value="<?php echo $item_id ;?>" />
		 <div class="logged-input-holder">
		 	<input type="text" name="menu_image_icon_size[<?php echo $item_id ;?>]" id="menu_image_icon_size-<?php echo $item_id ;?>" value="<?php echo esc_attr( $menu_image_size ); ?>" style="width: 100%;">		 	
		 </div>
	</div>
	<?php
}
add_action( 'wp_nav_menu_item_custom_fields', 'wpk_menu_image_icon', 10, 2 );

 Yah! We got two fields. Now, Let’s update the field value. Like,

How to Add Image Icons With Navigation Menus in WordPress Without Plugin
Menu Meta Field

Save Meta Field Value:

We already have two fields. But we need to update field value into a database. Let’s save field value into databases.

For update meta field value we need to use update_post_meta and delete_post_meta function . And Update menu field value we use wp_update_nav_menu_item hook.

Use this code on function.php:

function wpk_save_menu_item_meta( $menu_id, $menu_item_db_id ) {
	if ( isset( $_POST['menu_image_icon'][$menu_item_db_id]  ) ) {
		$sanitized_data = sanitize_text_field( $_POST['menu_image_icon'][$menu_item_db_id] );
		update_post_meta( $menu_item_db_id, '_menu_image_icon', $sanitized_data );
	} else {
		delete_post_meta( $menu_item_db_id, '_menu_image_icon' );
	}

	if ( isset( $_POST['menu_image_icon_size'][$menu_item_db_id]  ) ) {
		$sanitized_data = sanitize_text_field( $_POST['menu_image_icon_size'][$menu_item_db_id] );
		update_post_meta( $menu_item_db_id, '_menu_image_icon_size', $sanitized_data );
	} else {
		delete_post_meta( $menu_item_db_id, '_menu_image_icon_size' );
	}
}
add_action( 'wp_update_nav_menu_item', 'wpk_save_menu_item_meta', 10, 2 );

We completed the backend part. Now we are ready to use two fields but we need to get the output image.

Menu Image Item Output:

Now we’re gonna get an output image icon with a menu title. We can use the filter name nav_menu_item_title to return the title string.

Use the code on function.php:

function wpk_image_menu_output( $title, $item ) {
	if( is_object( $item ) && isset( $item->ID ) ) {
		$menu_img = get_post_meta( $item->ID, '_menu_image_icon', true );
		$menu_size = get_post_meta( $item->ID, '_menu_image_icon_size', true );
		$menu_size_array = explode('x', $menu_size);

		if ( ! empty( $menu_img ) ) {
			$menu_img_size = (!empty($menu_size))?  'width="'.$menu_size_array[0].'" height="'.$menu_size_array[1].'"':'';

			$title .= '<img src="'.$menu_img.'" '.$menu_img_size.' alt="image-icon" style="margin-left: 5px;">';
		}
	}
	return $title;
}
add_filter( 'nav_menu_item_title', 'wpk_image_menu_output', 10, 2 );

The field is working. You can use the image URL and image size.  Now you can add CSS class on li dynamically. With this class you can write CSS that make websites beautiful.    You can separate from others who do not have an image icon.

Menu Item add CSS class :

We can add a CSS class with a nav_menu_css_class hook. Manually You can add a CSS class. Go to Appearance > Menus and activate CSS Classes using Screen Options. Next go to your menu item and add a custom class in the new metabox that appeared. Save the menu and you are done. Now you can use this class either in a custom CSS box (if applicable) or in the theme’s style.

But we add it dynamically. 

Use this code on function.php

function wpk_add_css_class_dynamically($classes, $menu_item){

	$menu_img = get_post_meta( $menu_item->ID, '_menu_image_icon', true );

	if (!empty($menu_img)) {

		$classes[] = 'menu-image-icon';
	}
	return $classes;
}
add_filter( 'nav_menu_css_class', 'wpk_add_css_class_dynamically', 10, 2 );

Now you can see on li class attributes class name menu-image-icon. 

Conclusion:

This code is only for examples. Learning purpose only. If you want to use it professionally, learn it first. If you have any problem with it. We can help you. I hope you already learn, How to Add Image Icons With Navigation Menus in WordPress.

We hope we may like this article. Please comment below.

See More:

How To Create A WordPress Navigation Menu With Bootstrap 5

How to add Button in WordPress Navigation Menu

Leave a Reply

Your email address will not be published.