{"id":28724,"date":"2021-08-22T15:00:39","date_gmt":"2021-08-22T13:00:39","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=28724"},"modified":"2024-01-30T15:28:53","modified_gmt":"2024-01-30T14:28:53","slug":"add-menu-item-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/add-menu-item-in-wordpress\/","title":{"rendered":"How to Add Custom Items to Specific WordPress Menus"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]An admin user in WordPress can create navigation menus by adding links to pages, posts, archives, or custom resources. This is accomplished within the Appearance &gt; Menus section, a custom admin page reserved for menu creation. Users can arrange and add menu items on this page by drag-and-dropping them, as well as fill out important menu-related options and fields.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, there is a limit to what can be accomplished using just the default functionalities of the menu screen. Fortunately, you can extend those by adding custom items to specific WordPress menus. For example, you can <a href=\"https:\/\/qodeinteractive.com\/magazine\/conditional-menus-wordpress\/\">add conditional logic to your menu items<\/a>, or create additional custom fields that <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-style-wordpress-navigation-menus\/\">change a menu\u2019s stylization<\/a> or its functionality.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we will explore not just how to add menu items in WordPress but how to add a custom item to a specific menu, using code. Besides letting you tailor-make your menus, the information in this article will broaden your overall WordPress knowledge, and show you how to implement similar custom items. As we dig into the subject of adding custom item menus, we\u2019ll answer the following questions:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-add-custom-items-to-specific-wordpress-menus\">How to add custom items to specific WordPress menus<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-a-search-form-to-a-mobile-menu\">Adding a search form to a mobile menu<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-a-custom-menu-item-description-field\">Adding a custom menu item description field<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-add-custom-items-to-specific-wordpress-menus\"><\/a>How to add custom items to specific WordPress menus<\/h2>\n<p>[\/vc_column_text][vc_column_text]In the following sections, we will showcase two different ways of adding custom items. One relies solely on code, while the other involves the use of the WordPress user interface as well. Please bear in mind that the topics in this article are best suited for intermediate and advanced WordPress users. To keep up with what we\u2019ll be covering, you\u2019ll need an understanding of HTML and CSS, as well as what <a href=\"https:\/\/developer.wordpress.org\/plugins\/hooks\/\" target=\"_blank\" rel=\"noopener\">WordPress hooks<\/a> are and how they are used. We will try our best to explain the code in detail, but you should conduct additional research if you need help to fully understand this topic.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Before we proceed to the examples we prepared for this article, we recommend <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-manually-backup-wordpress-website\/\">making a backup of your website<\/a> beforehand. This is an important safety precaution when adding any custom code. The code we\u2019ll be using (and any similar to it) should be added either in the functions.php file of your child theme <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-use-ftp\/\">using FTP<\/a> or in a <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-site-specific-plugin\/\">site-specific plugin<\/a>. If you\u2019re not sure how to do that, we suggest checking out the resources we\u2019ve linked and brushing up on any points you\u2019re not confident about.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"adding-a-search-form-to-a-mobile-menu\"><\/a>Adding a search form to a mobile menu<\/h3>\n<p>[\/vc_column_text][vc_column_text]One way to add custom items to WordPress menus with code is by adding the code directly to a specific WordPress menu\u2019s HTML. This is done using the <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/wp_nav_menu_items\/\" target=\"_blank\" rel=\"noopener\">wp_nav_menu_items<\/a> filter hook, which was introduced in WordPress 3.0. This way is slightly more complicated for WordPress beginners, as a custom feature or functionality is added using only code. Depending on how it was coded, a custom feature or functionality can be added to all the registered menu locations within the theme or a specific one alone.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We will show you how this is done using a simple code snippet created for this article. This snippet can be used to add a custom search form at the end of the mobile menu. The code is given below.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function qode_adding_a_search_form_to_the_mobile_menu( $items, $args ) {\r\nif ( 'mobile-navigation' === $args-&gt;theme_location ) {\r\n$items .= '&lt;li class=\"qode-mobile-header-search\"&gt;' . get_search_form() . '&lt;\/li&gt;';\r\n}\r\n\r\nreturn $items;\r\n}\r\nadd_filter( 'wp_nav_menu_items', 'qode_adding_a_search_form_to_the_mobile_menu', 10, 2 );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Let\u2019s break it down.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The code represents a function we named <strong>qode_adding_a_search_form_to_mobile_menu()<\/strong> that was hooked onto the wp_nav_menu_items filter hook. The purpose of this code is really simple. If you have a registered menu location called <strong>mobile-navigation<\/strong> within your theme, then an additional menu item is added to the menu tied to that location. That menu item displays a search form using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_search_form\/\" target=\"_blank\" rel=\"noopener\">get_search_form()<\/a> function.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The get_search_form() function will look for and display the content of the <strong>searchform.php<\/strong> file, if one is present in either your parent or child theme. If one isn\u2019t present in either location, a default search form will be displayed instead. Alongside that, there are two more things we need to explain so you can make the best use of this custom code.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]First of all, we used a menu location called <strong>mobile-navigation<\/strong>. This location is specific to the <a href=\"https:\/\/lekker.qodeinteractive.com\/\" target=\"_blank\" rel=\"noopener\">Lekker theme<\/a>, as it\u2019s the one we\u2019re using. As such, this code shouldn\u2019t be copied and pasted without modification. Instead, <strong>you will need to replace the mobile-navigation part with a suitable menu location name that is registered within the theme you are using.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To help you with that task, there is a simple trick you can use to figure out the registered menu location name for any theme. To find yours, <strong>navigate to Appearance &gt; Menus<\/strong> and <strong>scroll to the bottom of the page. Within the Menu Settings section<\/strong>, you will see the labels of all available menu locations where you can assign a specific menu.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, to find the registered menu location names, you will need to inspect those labels. <strong>Position your mouse cursor over the menu location<\/strong> you wish to use and <strong>right-click on it<\/strong>. Then, <strong>select the <em>Inspect<\/em> option<\/strong> from the menu that appears.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Appearance-Menus-1.jpg\" class=\"attachment-full size-full\" alt=\"Appearance Menus\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Appearance-Menus-1.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Appearance-Menus-1-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Appearance-Menus-1-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Appearance-Menus-1-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Inspecting-Menu.jpg\" class=\"attachment-full size-full\" alt=\"Inspecting Menu\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Inspecting-Menu.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Inspecting-Menu-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Inspecting-Menu-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Inspecting-Menu-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This will open your browser\u2019s developer tools and put you within the Elements tab, on the exact HTML element that you right-clicked on. Then, <strong>you will need to examine the HTML structure of that part of the page to locate the appropriate menu location name<\/strong>. Luckily, that\u2019s very straightforward as the suitable menu location name will be displayed in three places, as you can see from the screenshot below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"525\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Inspecting-Menu-Locations.jpg\" class=\"attachment-full size-full\" alt=\"Inspecting Menu Locations\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Inspecting-Menu-Locations.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Inspecting-Menu-Locations-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Inspecting-Menu-Locations-768x416.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Inspecting-Menu-Locations-620x336.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To clarify, you will see the same marked parts of code on your end. They will be in the forms of <strong>menu-locations[your-location-name] <\/strong>and<strong> locations-your-location-name<\/strong>. Please note, the part with <strong>your-location-name<\/strong> will have a suitable replacement. The reason for this structure lies in how the menu options are created. This is thanks to the code located in the \/wp-admin\/nav-menus.php file, one of the WordPress core files.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>After you find a suitable menu location, you will need to replace the mobile-navigation part in our code with the appropriate location for the code to work properly on your theme.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The second point we wanted to make concerns the custom CSS class called<strong> qode-mobile-header-search<\/strong>. This CSS class was added to help us make the CSS code needed to stylize the search form after displaying it. Your newly created search form will most likely only be partially styled and it will require additional stylization code. As code like this is made on a case-by-case basis, we can\u2019t suggest something that would be applicable for all websites. However, we will share the code we used to illustrate this example.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.qode-mobile-header-search{\r\nmargin-top: 20px !important;\r\nposition: relative;\r\n}\r\n.qode-mobile-header-search input {\r\nwidth: 100%;\r\nvertical-align: top;\r\npadding-left: 20px;\r\npadding-right: 78px;\r\nfont-size: 14px;\r\ncolor: #333;\r\nbackground-color: #fff;\r\nborder: 1px solid #000;\r\nheight: 50px;\r\nline-height: 30px;\r\nborder-radius: 0;\r\noutline: 0;\r\n}\r\n.qode-mobile-header-search button {\r\nposition: absolute;\r\ntop: 0;\r\nright: 0;\r\nwidth: 78px;\r\nfont-size: 15px;\r\npadding: 10px 30px;\r\ntext-align: center;\r\ncolor: #fff;\r\nbackground-color: #000;\r\nborder: 0;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After adding this stylization code, we got the following result (shown in the screenshot below). The search form is added after the last mobile menu item by the first code snippet and stylized so it matches the looks used in the mobile menu by the second.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"650\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Search-Form-on-Mobile.jpg\" class=\"attachment-full size-full\" alt=\"Search Form on Mobile\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Search-Form-on-Mobile.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Search-Form-on-Mobile-300x201.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Search-Form-on-Mobile-768x515.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Search-Form-on-Mobile-620x416.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"adding-a-custom-menu-item-description-field\"><\/a>Adding a custom menu item description field<\/h3>\n<p>[\/vc_column_text][vc_column_text]The second method of adding custom items to WordPress menus involves creating custom fields that are tied to all menu items. Then all you need to do is fill the custom fields belonging to the menu items within a specific WordPress menu, and this will add a custom item to that menu alone.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This approach to adding custom items to a menu is much easier once you lay down the groundwork. Then you will only need to fill a specific menu item field and your custom content will be displayed on the website in the place tied to that custom field. However, coding-wise, this method is more complex than the one we described before. Its complexity is eased by the WordPress 5.4 update, which introduced the <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/wp_nav_menu_item_custom_fields\/\" target=\"_blank\" rel=\"noopener\">wp_nav_menu_item_custom_fields<\/a> action hook. We\u2019ll show you one way of how this hook can be used.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For this example, we created a code snippet that adds a custom field called <em>Menu item description<\/em> to any menu item. If a value is inserted into this custom field, then the field will be displayed on the website\u2019s frontend, below the corresponding menu item label. You can see the code we used to accomplish this below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function qode_create_custom_menu_item_field( $item_id, $item ) {\r\n$description_value = get_post_meta( $item_id, '_menu_item_description', true );\r\n?&gt;\r\n&lt;p class=\"description description-wide\"&gt;\r\n&lt;label for=\"edit-menu-item-title-&lt;?php echo esc_attr( $item_id ); ?&gt;\"&gt;\r\n&lt;?php _e( 'Menu item description' ); ?&gt;&lt;br\/&gt;\r\n&lt;input type=\"text\" id=\"edit-menu-item-description-&lt;?php echo esc_attr( $item_id ); ?&gt;\"\r\nclass=\"widefat edit-menu-item-description\"\r\nname=\"menu_item_description[&lt;?php echo esc_attr( $item_id ); ?&gt;]\"\r\nvalue=\"&lt;?php echo esc_attr( $description_value ); ?&gt;\"\/&gt;\r\n&lt;\/label&gt;\r\n&lt;\/p&gt;\r\n&lt;?php\r\n}\r\nadd_action( 'wp_nav_menu_item_custom_fields', 'qode_create_custom_menu_item_field', 10, 2 );\r\nfunction qode_save_custom_menu_item_field( $menu_id, $menu_item_db_id ) {\r\nif ( isset( $_POST['menu_item_description'][ $menu_item_db_id ] ) &amp;&amp; '' !== trim( $_POST['menu_item_description'][ $menu_item_db_id ] ) ) {\r\n$sanitized_data = sanitize_text_field( $_POST['menu_item_description'][ $menu_item_db_id ] );\r\nupdate_post_meta( $menu_item_db_id, '_menu_item_description', $sanitized_data );\r\n} else {\r\ndelete_post_meta( $menu_item_db_id, '_menu_item_description' );\r\n}\r\n}\r\nadd_action( 'wp_update_nav_menu_item', 'qode_save_custom_menu_item_field', 10, 2 );\r\nfunction qode_display_custom_menu_item_field( $title, $item ) {\r\nif ( is_object( $item ) &amp;&amp; isset( $item-&gt;ID ) ) {\r\n$description = get_post_meta( $item-&gt;ID, '_menu_item_description', true );\r\n\r\nif ( ! empty( $description ) ) {\r\n$title .= '&lt;p class=\"qode-mi-description\"&gt;' . esc_html( $description ) . '&lt;\/p&gt;';\r\n}\r\n}\r\n\r\nreturn $title;\r\n}\r\nadd_filter( 'nav_menu_item_title', 'qode_display_custom_menu_item_field', 10, 2 );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Let\u2019s break it down.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Simply put, the code above consists of three functions that we created, which are then hooked onto appropriate WordPress hooks. Each of these functions plays an important role in adding a custom field to a specific menu item. We will discuss them below, one at a time.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The first function, called qode_create_custom_menu_item_field() is used for displaying the new option field within every menu item, as well as the field\u2019s value in the website\u2019s backend.<\/strong> This function contains HTML code that serves to display the option in the backend. That code consists of two things. One is a label that states <em>Menu item description<\/em>, which describes the custom field, and the other is an input field where the description is inserted. The latter is where you would insert the description that will be displayed below the chosen menu item in your website\u2019s frontend. And thanks to the use of the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_post_meta\/\" target=\"_blank\" rel=\"noopener\">get_post_meta()<\/a> function, this same label will display the option value in the backend.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The qode_create_custom_menu_item_field() function is then hooked onto the <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/wp_nav_menu_item_custom_fields\/\" target=\"_blank\" rel=\"noopener\">wp_nav_menu_item_custom_fields<\/a> action hook. This allows our custom field to be created for all menu items.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function qode_create_custom_menu_item_field( $item_id, $item ) {\r\n$description_value = get_post_meta( $item_id, '_menu_item_description', true );\r\n?&gt;\r\n&lt;p class=\"description description-wide\"&gt;\r\n&lt;label for=\"edit-menu-item-title-&lt;?php echo esc_attr( $item_id ); ?&gt;\"&gt;\r\n&lt;?php _e( 'Menu item description' ); ?&gt;&lt;br\/&gt;\r\n&lt;input type=\"text\" id=\"edit-menu-item-description-&lt;?php echo esc_attr( $item_id ); ?&gt;\"\r\nclass=\"widefat edit-menu-item-description\"\r\nname=\"menu_item_description[&lt;?php echo esc_attr( $item_id ); ?&gt;]\"\r\nvalue=\"&lt;?php echo esc_attr( $description_value ); ?&gt;\"\/&gt;\r\n&lt;\/label&gt;\r\n&lt;\/p&gt;\r\n&lt;?php\r\n}\r\nadd_action( 'wp_nav_menu_item_custom_fields', 'qode_create_custom_menu_item_field', 10, 2 );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The second function we created is called qode_save_custom_menu_item_field(). It ensures that the description value you insert is properly saved inside the database and that the corresponding meta field is properly updated after the <em>Save Menu<\/em> button is pressed in the Appearance &gt; Menus section.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To explain in further detail, the code first checks if you have inserted a value in the new description field. It also checks that the inserted value isn\u2019t only composed of whitespaces. Then, if those checks are passed, the input value is sanitized using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/sanitize_text_field\/\" target=\"_blank\" rel=\"noopener\">sanitize_text_field()<\/a> function and saved into the corresponding meta field using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/update_post_meta\/\" target=\"_blank\" rel=\"noopener\">update_post_meta()<\/a> function. Otherwise, the previously saved meta value is deleted using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/delete_post_meta\/\" target=\"_blank\" rel=\"noopener\">delete_post_meta()<\/a> function. To make sure this code is properly executed, the function is hooked onto the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_update_nav_menu_item\/\" target=\"_blank\" rel=\"noopener\">wp_update_nav_menu_item<\/a> action hook.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function qode_save_custom_menu_item_field( $menu_id, $menu_item_db_id ) {\r\nif ( isset( $_POST['menu_item_description'][ $menu_item_db_id ] ) &amp;&amp; '' !== trim( $_POST['menu_item_description'][ $menu_item_db_id ] ) ) {\r\n$sanitized_data = sanitize_text_field( $_POST['menu_item_description'][ $menu_item_db_id ] );\r\nupdate_post_meta( $menu_item_db_id, '_menu_item_description', $sanitized_data );\r\n} else {\r\ndelete_post_meta( $menu_item_db_id, '_menu_item_description' );\r\n}\r\n}\r\nadd_action( 'wp_update_nav_menu_item', 'qode_save_custom_menu_item_field', 10, 2 );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, the third function we created is called <strong>qode_display_custom_menu_item_field()<\/strong>. It serves to display the description value below the corresponding menu item on the website\u2019s frontend. It does so by first checking the validity of the menu item whose description value we want to display. This is accomplished using the <a href=\"https:\/\/www.php.net\/manual\/en\/function.is-object.php\" target=\"_blank\" rel=\"noopener\">is_object()<\/a> function, as well as the <a href=\"https:\/\/www.php.net\/manual\/en\/function.isset.php\" target=\"_blank\" rel=\"noopener\">isset()<\/a> function, that check the menu item ID. The remaining part of the code is executed only after passing both these checks.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the following part of the code, we first store the description value inside the <strong>$description<\/strong> variable. This is done using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_post_meta\/\" target=\"_blank\" rel=\"noopener\">get_post_meta()<\/a> function for the menu item and meta key we gave to the newly created field.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Then, as long as the description value isn\u2019t empty, it is added below the appropriate menu item. The description is included inside a paragraph with a custom class <strong>qode-mi-description<\/strong>. That way, it can be used for stylization purposes later on if necessary.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, to make the code work properly, we hooked the <strong>qode_display_custom_menu_item_field()<\/strong> function to the <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/nav_menu_item_title\/\" target=\"_blank\" rel=\"noopener\">nav_menu_item_title<\/a> filter hook.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function qode_display_custom_menu_item_field( $title, $item ) {\r\nif ( is_object( $item ) &amp;&amp; isset( $item-&gt;ID ) ) {\r\n$description = get_post_meta( $item-&gt;ID, '_menu_item_description', true );\r\n\r\nif ( ! empty( $description ) ) {\r\n$title .= '&lt;p class=\"qode-mi-description\"&gt;' . esc_html( $description ) . '&lt;\/p&gt;';\r\n}\r\n}\r\n\r\nreturn $title;\r\n}\r\nadd_filter( 'nav_menu_item_title', 'qode_display_custom_menu_item_field', 10, 2 );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This wraps up our breakdown of the code. Now, let\u2019s take a look at how this newly created custom field is used.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For starters, you will need to pick the menu where you want to add a custom item. Then, choose the menu item that you want to add a description to. Finally, insert a value into the description field, so that it could be displayed on your website.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To put this into practice, <strong>navigate to Appearance &gt; Menus<\/strong> and<strong> select a menu<\/strong> that you wish to edit. Then, <strong>locate the menu item<\/strong> that you want to add a description to. <strong>Click to open that menu item<\/strong> and<strong> locate the input field with the label <em>Menu item description<\/em> above it. Insert your description for that menu item<\/strong> and <strong>press the <em>Save Menus<\/em> button<\/strong> to update the option.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Edit-Menus.jpg\" class=\"attachment-full size-full\" alt=\"Edit Menus\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Edit-Menus.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Edit-Menus-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Edit-Menus-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Edit-Menus-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"615\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Save-Menu-1.jpg\" class=\"attachment-full size-full\" alt=\"Save Menu\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Save-Menu-1.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Save-Menu-1-300x190.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Save-Menu-1-768x487.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Save-Menu-1-620x393.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]There is one more thing we need to mention\u2014the custom <em>Menu item description<\/em> field that we created for this article closely resembles an existing WordPress field called <em>Description<\/em>. The <em>Description<\/em> field can be found within a menu item, once you enable the appropriate option (called <em>Description<\/em>) within the Screen Options at the top of your menu edit screen.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Screen-Options-Description.jpg\" class=\"attachment-full size-full\" alt=\"Screen Options Description\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Screen-Options-Description.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Screen-Options-Description-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Screen-Options-Description-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Screen-Options-Description-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"645\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Menu-Descriptions.jpg\" class=\"attachment-full size-full\" alt=\"Menu Descriptions\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Menu-Descriptions.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Menu-Descriptions-300x200.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Menu-Descriptions-768x511.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Menu-Descriptions-620x413.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The default WordPress <em>Description<\/em> field is created thanks to the code located across several files within the wp-admin and wp-includes folders. However, whether its value is displayed depends on your theme (as is mentioned below the field). Our custom field differs, coding-wise, from the default WordPress field, which lets it work with all themes. We invite you to use it, just remember to properly replace things like the menu location![\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Additionally, the code we created can be used as a teaching example. We carefully covered all the steps necessary for a menu field to work properly and be displayed on the website. This should allow you to see how similar custom fields are created and get a deeper understanding of WordPress menu fields as a whole. Having said that, let\u2019s continue with the article.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After inserting the value into your custom field, <strong>you can open the front end of your website and examine the result you got<\/strong>. Don\u2019t forget to make sure that the menu you edited has been associated with a menu location displayed on the website. Similar to our example for adding a search form to a mobile menu, the resulting display of your custom menu item description might lack stylization. To fix any style inconsistency with your site, you will need to create suitable CSS code. This is done on a case-by-case basis, so we can\u2019t suggest any universally applicable code. You will need to create this CSS code yourself, but we left you the custom class in the code that you can use now.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]While any CSS code we used shouldn\u2019t be copied and pasted directly, we will nevertheless show it below. For our purposes, only a small snippet of CSS code was sufficient to adjust the style.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.qode-mi-description {\r\nmargin: 0;\r\ncolor: #ff0000;\r\nfont-style: italic;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]When you prepare your CSS, you should know where it and any similar CSS code can be safely placed. Generally speaking, most WordPress users should insert the CSS code in the Appearance &gt; Customize &gt; Additional CSS section. However, more advanced users with the knowledge to do it can opt to put their CSS in a separate file. Then they\u2019d upload it to the server and enqueue it using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_style\/\" target=\"_blank\" rel=\"noopener\">wp_enqueue_style()<\/a> function. If you\u2019d like to learn more about how to do that, you can check out our article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-enqueue-scripts-wordpress\/\" target=\"_blank\" rel=\"noopener\">enqueue-ing custom scripts and styles<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, after adding the CSS code shown above, we got the following result that you can see below.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"487\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Menu-Item-Description-Result.jpg\" class=\"attachment-full size-full\" alt=\"Menu Item Description Result\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Menu-Item-Description-Result.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Menu-Item-Description-Result-300x151.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Menu-Item-Description-Result-768x386.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Menu-Item-Description-Result-620x312.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]There are many benefits that would inspire WordPress users to add a custom items menu. Custom items can enrich a WordPress menu and add new functionalities or use descriptions to entice viewers towards specific parts of your website. But, as creating custom menu items isn\u2019t a default WordPress option, you will need to use carefully crafted code snippets to help you. Alternatively, you can try to find a WordPress plugin that would work for this purpose.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we chose to explore the first route. We carefully explained two coding examples and how they are used. If you follow the steps outlined in our instructions, we are sure that you will have a new custom items menu in no time. Additionally, the code we provided can also work as a guideline for creating new custom items and extending the functionality of WordPress menus using custom items. So, hopefully, you will have learned something new while improving your website with custom menu items.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Create comprehensive navigation for your WordPress website with our step-by-step guide on how to add custom items to your menus.<\/p>\n","protected":false},"author":11229,"featured_media":28741,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[20,135,21,4,13],"class_list":["post-28724","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-css","tag-customization","tag-php","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/28724","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/11229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=28724"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/28724\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/28741"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=28724"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=28724"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=28724"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}