{"id":23267,"date":"2021-04-26T15:15:08","date_gmt":"2021-04-26T13:15:08","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=23267"},"modified":"2021-04-26T15:04:45","modified_gmt":"2021-04-26T13:04:45","slug":"how-to-add-title-attribute-to-wordpress-menu","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-add-title-attribute-to-wordpress-menu\/","title":{"rendered":"How to Add the Title Attribute to Your WordPress Menu"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Even though one of WordPress&#8217; stronger selling points is that you can customize it endlessly with plugins and themes, the core product also packs plenty of features and functionalities. So many features and functionalities, in fact, that navigating all of them might be tricky at first. Especially because some of them \u2013 the less commonly used ones \u2013 can be tucked away somewhere far from the beaten path.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This is the issue you\u2019ll face if you want to add the title attribute to WordPress menu items. So before you start searching for a plugin that enables you to do it, maybe first read this article. We\u2019ll show you:<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=\"#whats-the-title-attribute\">What\u2019s the Title Attribute<\/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=\"#why-add-it-to-your-wordpress-menu-items\">Why Add It to Your WordPress Menu Items<\/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=\"#how-to-add-title-attribute-to-your-wordpress-menu\">How to Add Title Attribute to Your WordPress Menu<\/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=\"whats-the-title-attribute\"><\/a>What\u2019s the Title Attribute?<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"553\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Whats-the-Title-Attribute.jpg\" class=\"attachment-full size-full\" alt=\"What\u2019s the Title Attribute\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Whats-the-Title-Attribute.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Whats-the-Title-Attribute-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Whats-the-Title-Attribute-768x438.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Whats-the-Title-Attribute-620x354.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>The title attribute is one of HTML attributes and, as such, it\u2019s used to provide additional information about an element.<\/strong> All attributes consist of names and values \u2013 \u201ctitle\u201d is the name of this attribute. The value you assign to it is the text you add to it. Below is how you\u2019d use it in a line of code \u2013 but don\u2019t worry, you won\u2019t have to code to add it to the title menu.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;a href=\"https:\/\/qodeinteractive.com\/magazine\/\" title=\"Qode Magazine\"&gt;Click to view more articles.&lt;\/a&gt;<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]From a website visitor\u2019s perspective, <strong>the title attribute will usually appear as a tooltip when they hover their cursor over an HTML element that has the attribute added to it.<\/strong> That\u2019s not the purpose of this attribute, but it is the most likely way a browser will handle it. If you hover over the linked text below, you should be able to see the tooltip appear.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<a title=\"Qode Magazine\" href=\"https:\/\/qodeinteractive.com\/magazine\/\" target=\"_blank\" rel=\"noopener\">Click to view more articles.<\/a>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>You can use the title attribute on any HTML element.<\/strong> Generally, however, it\u2019s not a good idea to add anything that\u2019s not needed to your website, so you should only use the title attribute where it makes sense. <strong>Usually, this includes links, images, and menu items.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"why-add-it-to-your-wordpress-menu-items\"><\/a>Why Add It to Your WordPress Menu Items?<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#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=\"461\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Menu-Bridge.jpg\" class=\"attachment-full size-full\" alt=\"Menu Bridge\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Menu-Bridge.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Menu-Bridge-300x143.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Menu-Bridge-768x365.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Menu-Bridge-620x295.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>The main reason to add the title attribute to any element on your website is to provide more information about it.<\/strong> Someone might add it to links to help the website\u2019s visitors understand where they\u2019ll land if they click the links. People will also add the title attribute to images when they\u2019re creating <a href=\"https:\/\/qodeinteractive.com\/theme-category\/portfolio-wordpress-themes\/\">portfolio websites<\/a> to avoid distracting text.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>With menu items, adding the title attribute can improve the user experience, allow for more flexibility in menu design, and even expand branding opportunities.<\/strong> Thanks to the additional information packed into a tooltip that will appear on hover \u2013 enabled by the title attribute \u2013 you will have more freedom with naming the menu items.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>For example, you can name the menu items in accordance with the \u201cpersonality\u201d of a brand and then use the title attribute to show the visitors the real name of the menu item.<\/strong> You can be witty or funny when naming the menu items and use the title attribute to be informative. It works the other way around, too.<strong> You might also add a call-to-action in the title attribute to entice the indecisive visitor to browse your website.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>There are a couple of things you shouldn\u2019t try to do with the title attribute.<\/strong> The title attribute doesn\u2019t contribute to your website\u2019s search engine optimization. It\u2019s likely not a way to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-improve-accessibility-wordpress\/\">improve your website\u2019s accessibility<\/a>, either.<strong> You shouldn\u2019t rely on it for these purposes, and you also shouldn\u2019t use it to fix serious navigation problems if your website is suffering from them.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-add-title-attribute-to-your-wordpress-menu\"><\/a>How to Add Title Attribute to Your WordPress Menu<\/h2>\n<p>[\/vc_column_text][vc_column_text]Usually, hovering over a menu item on your WordPress website won\u2019t produce a tooltip. <strong>Your WordPress theme might enable the title attributes in the menu for you, but you won\u2019t see a tooltip until there\u2019s some text to show within it.<\/strong>[\/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\/04\/Menu-Items.jpg\" class=\"attachment-full size-full\" alt=\"Menu Items\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Menu-Items.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Menu-Items-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Menu-Items-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Menu-Items-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To enable adding title attributes to the menu, you should head over to <em><strong>Appearance &gt; Menus<\/strong><\/em>. <strong>There, you\u2019ll select the menu you want to edit \u2013 you will need to have a menu for this \u2013 and expand any of the menu items to reveal its configuration options<\/strong>. With a vanilla WordPress installation, you should see something like this.[\/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=\"653\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Select-Menu.jpg\" class=\"attachment-full size-full\" alt=\"Select Menu\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Select-Menu.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Select-Menu-300x202.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Select-Menu-768x518.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Select-Menu-620x418.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To add the title attribute field to the options, you should first enable it.<strong> Look to the upper right-hand side corner of the page \u2013 you\u2019ll notice a \u201cscreen options\u201d button right next to the \u201chelp\u201d button.<\/strong> Click on it, and you\u2019ll bring down a menu where you can choose screen elements and advanced menu properties.[\/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\/04\/Screen-Elements.jpg\" class=\"attachment-full size-full\" alt=\"Screen Elements\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Screen-Elements.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Screen-Elements-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Screen-Elements-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Screen-Elements-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We\u2019re interested in the advanced menu properties.<strong> Any of the boxes you check will add a configuration option \u2013 including the title attribute field.<\/strong> So go ahead and check the title attribute box \u2013 the second one from the left \u2013 and go back to the configuration options of your menu items. <strong>You\u2019ll notice there\u2019s a title attribute field there now.<\/strong>[\/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=\"680\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Title-Attribute-Field-Menu-Item.jpg\" class=\"attachment-full size-full\" alt=\"Title Attribute Field Menu Item\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Title-Attribute-Field-Menu-Item.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Title-Attribute-Field-Menu-Item-300x211.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Title-Attribute-Field-Menu-Item-768x539.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Title-Attribute-Field-Menu-Item-620x435.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]With the field enabled, you can do ahead and enter the text you want to appear when someone hovers over the menu items. <strong>Again, keep in mind that every menu item should be labeled so that it\u2019s clear to the visitor where they\u2019ll go if they click on it.<\/strong> The text you add should contribute to their user experience in another way.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you\u2019re done, don\u2019t forget to press the \u201csave menu\u201d button. <strong>Checking the title attribute checkbox will produce the corresponding field in every menu item\u2019s configuration options.<\/strong> If you only want to add the attribute to some items, simply add it to them and leave the rest blank. The result will look something like this.[\/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\/04\/Title-Attribute-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Title Attribute Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Title-Attribute-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Title-Attribute-Preview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Title-Attribute-Preview-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Title-Attribute-Preview-620x331.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\">Let\u2019s Wrap It Up!<\/h2>\n<p>[\/vc_column_text][vc_column_text]Title attributes can come in handy in different situations involving different elements. The one thing all of these situations have in common is that they add to the user experience and not to the clutter. While adding the title attribute to your website is as simple as checking a box and writing some words, you should only do it if you\u2019re sure you have a good reason for it. And remember \u2013 the title attribute can\u2019t fix bad website navigation.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Not sure how to add the title attribute to your WordPress website&#8217;s menu? You can do it with a couple of clicks &#8211; we&#8217;ll show you how!<\/p>\n","protected":false},"author":9295,"featured_media":23387,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[4,13],"class_list":["post-23267","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/23267","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\/9295"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=23267"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/23267\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/23387"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=23267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=23267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=23267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}