While one of WordPress’ strongest selling points is that you can customize it endlessly with plugins and themes, the core product also includes a lot of features and functionality. In fact, there are so many features and functionalities that navigating all of them can be difficult at first. Especially since some of these – less used ones – can be hidden away from the trails.
This is the problem you will run into if you want to add the title attribute to WordPress menu items. So before you start looking for a plugin that lets you do this, maybe read this article first. We will show you:
The title attribute is one of the HTML attributes and is therefore used to provide additional information about an element. All attributes are made up of names and values – “title” is the name of this attribute. The value you assign to it is the text you add to it. Here’s how to use it in one line of code – but don’t worry, you won’t have to code to add it to the header menu.
<a href="https://qodeinteractive.com/magazine/" title="Moyens I/O">Click to view more articles.</a>
From a website visitor’s point of view, The title attribute usually appears as a tooltip when hovering the cursor over an HTML element attached to it. This is not the purpose of this feature, but it is the most likely way a browser will handle it. If you hover the mouse over the linked text below, you should be able to see the tooltip appear.
Click to view more articles.
You can use the title attribute on any HTML element. But in general, it’s not a good idea to include anything that isn’t necessary on your website, so you should only use the header attribute where it makes sense. Usually this includes links, images, and menu items.
The main reason to add the title attribute to any element on your website is to provide more information about it. One can add it to the links to help the website’s visitors understand where to go when they click the links. People also add captions to images when creating portfolio websites to avoid distracting text.
With menu items, adding the title attribute can improve the user experience, provide more flexibility in menu design, and even expand branding opportunities. You’ll have more freedom in naming menu items with additional information packed in a hover tooltip enabled by the title feature.
For example, you can name menu items based on a brand’s “personality” and then use the title attribute to show visitors the actual name of the menu item. You can be witty or funny when naming menu items and use the title feature to be informative. It works vice versa. You can also add a call to action to the title attribute to entice the indecisive visitor to take a look at your website.
There are a few things you shouldn’t try to do with the title attribute. The title attribute does not contribute to your website’s search engine optimization. It’s probably not a way to improve your website’s accessibility either. You shouldn’t rely on it for these purposes, and you shouldn’t also use it to fix serious browsing issues if your website has issues.
Typically, hovering over a menu item on your WordPress website does not produce a tooltip. Your WordPress theme can enable the header properties in the menu for you, but you won’t see a tooltip until you have some text to show in it.
To enable adding title attributes to the menu, you must navigate to: View > Menus. There, you’ll select the menu you want to edit – you’ll need to have a menu for that – and expand any of the menu items to reveal the configuration options.. You should see something like this with a vanilla WordPress installation.
To add the title attribute field to the options, you must first enable it. Look at the top right corner of the page – right next to the “help” button you will see a “screen options” button. Click on it and you will open a menu where you can select screen items and advanced menu features.
We are interested in advanced menu features. Any of the boxes you checked will add a configuration option, including the title attribute field. So go ahead and check the title property box – second from the left – and go back to your menu items’ configuration options. Now you will notice there is a header attribute field.
Once the field is enabled, you can pre-make it and enter the text you want to appear when someone hovers over the menu items. Again, remember that each menu item must be labeled so the visitor can see where they’re going when they click. The text you add should contribute to the user experience in another way.
When you’re done, don’t forget to hit the “save menu” button. Checking the Title property checkbox will produce the corresponding field in the configuration options for each menu item. If you only want to add the attribute to some elements, add only to them and leave the rest blank. The result will look something like this.
Let’s wrap it up!
Title attributes can be useful in different situations involving different elements. What all these cases have in common is that they add to the user experience, not the complexity. While adding the title attribute to your website is as simple as ticking a box and typing some words, you should only do it if you’re sure you have a good reason for doing so. And remember – the header attribute cannot fix bad website navigation.
Support our work ❤️
If you enjoyed this article, consider leaving a tip to help us keep publishing great content.
