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 functions.php file:

/* ------------------------------------------------
jQuery the right, Google way!
------------------------------------------------ */
if( !is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"), false, '1.4.2');
wp_enqueue_script('jquery');
}

What this does is it includes the jQuery library directly from your WordPress core install Google’s CDN. This is very useful, because you don’t need to update jQuery with every release – if there’s a new version, Google 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); ?>/js/custom.js"></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!