Add the custom field in the WordPress nav item

Once we want to develop a WordPress theme navigation is be the most challenging part for whole theme development. Sometimes, we need to add some extra classes in the navigation frontend. Also, we need some extra fields inside the WordPress admin navigation item. It’s very important to show navigation properly in the frontend. That’s why we need custom fields inside the admin panel navigation items. In this article, I will show you how to add the custom field in the WordPress nav item.

Introduce a new hook in WordPress

WordPress is the most popular CMS in the World. Because of that, they have awesome core functionalities. Previously I have written about Why WordPress is the popular CMS. WordPress hook system is one of them. You can change each and every default functionality using the hooks. You don’t need to change their core coding structure for customization. WordPress introduced their hooks with the version update news. From WordPress 5.4.0 they introduced a new hook for adding custom fields in the WordPress menu item. A new hook is below:

wp_nav_menu_item_custom_fields

Using the above hook you can add any type of field in the WordPress navigation item in the admin area. In the WordPress older versions not support this hook. Before this update, we can add custom fields in the menu area extending WordPress core menu class which is the most complicated for new developers. That’s why this hook will help more for new developers. You can get more knowledge from WordPress update note release .Let’s know how you can add custom fields using this hook.

Add custom field in menu item

Put below code in your active theme functions file for create custom fields in the navigation item.

<?php
add_action('wp_nav_menu_item_custom_fields', 'learnwptech_menu_item_custom_fields');

function learnwptech_menu_item_custom_fields($menuid){
 $custom_value = get_post_meta($menuid, '_custom_value', true);
?>
 <p>
  <label for="custom_field">Custom Input Field</label>
  <input type="text" name="custom-field[<?php echo $menuid; ?>]" value="<?php echo $custom_value; ?>" />
 </p>
<?php
}

Now refresh your navigation admin area and check any menu item. You will see a custom field has been created. This input value is shown but it not will be save on the database. Because of that, we didn’t write code to save this value.

Save custom field value in the database

If you want to save above custom field value in the database put below code inside the active theme functions file.

add_action('wp_update_nav_menu_item', 'learnwptech_nav_item_update', 10, 2);
function learnwptech_nav_item_update($menuid, $menu_db_id){
  update_post_meta($menu_db_id, '_custom_value', $_POST['custom-field'][$menu_db_id]);
}

Using this process you can be add any type of field in your WordPress navigation item. I hope this tutorial will be help you to add custom field in your menu.