How to remove title tags in WordPress
By default, WordPress adds a title tag to any category or page menu item that you create.
You can see it depicted in the above image.
That’s ok sometimes for SEO (though it doesn’t help a lot), but most of the times you’ll find it annoying, cluttering your design.
The hard way would be to manually (hard-code) your menu – but this is not an elegant nor efficient solution in the long run.
Luckily, we can easily remove these title attributes with the help of jQuery.
1. First, make sure you include jQuery in your theme the right way. That is, put this in you header.php file:
What this does is it includes the jQuery library directly from your WordPress core install. This is very useful, because you don’t need to update jQuery with every release – if there’s a new version, WordPress will be sure to include it in a the latest release.
2. Now, create a file called custom.js, save it in a folder called js in your theme folder, and call it in your header after the reference to jQuery. Your code should look like this:
<script src="<?php bloginfo(template_url); ?"><!--mce:0--></script>
3. Open custom.js and copy/paste the following code:
jQuery(document).ready(function(){ jQuery("li.cat-item a").each(function(){ jQuery(this).removeAttr('title'); }) jQuery("li.page_item a").each(function(){ jQuery(this).removeAttr('title'); }) });
Done! Save it and upload it. Your menu items won’t show those ugly titles when you hover with your mouse.
Code explanation:
The above jQuery code looks for any list item with a class name of “cat-item”, and removes the title attribute for any anchors (links) contained in that list item. Same goes for any list item with a class name of “page_item”.
So in case you have other unordered lists in the loop – like for example, a list of the most popular posts – you would just copy and paste one of the lines and change the class name for that given list item.
Example: let’s say, somewhere in our theme, we generate a list of the most popular posts. Suppose we have already given the list items a class name of “related”.
Our code would need to look like this now:
jQuery(document).ready(function(){ jQuery("li.cat-item a").each(function(){ jQuery(this).removeAttr('title'); }) jQuery("li.page_item a").each(function(){ jQuery(this).removeAttr('title'); }) jQuery("li.related a").each(function(){ jQuery(this).removeAttr('title'); }) });
I think there’s also a plugin that does this, but it’s always better to avoid the use of many plugins – especially since some things can be so easily achieved 
Anyway, hope this helps!
Please share it if you liked it:
Related Posts
- Display ads in WordPress depending on what site the visitor comes from
- WordPress Ecommerce Plugin – PHPurchase
- WordPress Membership Plugins and Resources
- WordPress Ecommerce Plugins, Themes and Tutorials
- Win WordPress Hosting and ElegantThemes subscription
6 Comments For This Post
What do you think of this?
January 4th, 2010 at 18:43
There is a plugin for this: Remove Title Attributes. While I agree that too many plugins can be a bad thing, in this case I think that it offers a better solution. Apart from ease of use, the main advantage of the plugin is that it will work for everyone, whereas javascript-based solutions won’t work for users who have javascript disabled.
January 4th, 2010 at 20:20
Tim, thanks for adding that
I agree it’s far easier to use for novice users. Thing is, as you said, it’s always better to use custom code instead of plugins that bloat your site.
As for users with JS, I always like to ask people this: did you hear one person saying Gmail or the new Yahoo! don’t work for them (and then figured out they didn’t have JS) ?
I might be wrong, but I really don’t cater for users that deliberately turn their JS off (because the rest… let’s face it, all browsers nowadays support JS)
Anyway, it’s always best to present users with alternatives. Thanks!
June 5th, 2010 at 07:45
this tutorial works like a charm.. am applying this on my superfish category menu for a website project of mine.. now those annoying popping descriptions are done for.. thanks so much for taking the time to post this!
July 6th, 2010 at 07:41
That all is great, but I have a bigger problem. I’ve tried the Plug in, and hard coding too.
I Don’t need to REMOVE titles completely, I just need to HIDE them when mouse over.
As each of my page title is in it’s own DIV and contains info with how much padding(from top/left/right) it should have. When it’s removed by a plug in or code the style breaks down.
I know it’s lame but thats the only way I can achieve the look I want..
can someone please comment on that?
July 6th, 2010 at 07:56
Disregard the previous one, JQuery actually worked for me!
So I guess if somebody else too has code in the “title” tag, like FONT or DIV etc.. don’t use the Plugin as it completely removes the formatting, but use JQuery code above instead.:)
July 7th, 2010 at 13:36
Hey Lana,
Not sure I understood your first comment, but I’m glad to know you got it working.
This tutorial is just for removing the title=”" attribute from links (example: <a href=”link here”
title=”View all posts in…” />), so you don’t get stuff like “View all posts in…” when hovering them.However, since WordPress 3.0, we have custom menus, so the problem has been taken care of almost completely