How to remove title tags in WordPress

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:

1
<?php wp_enqueue_script("jquery"); ?>

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:

1
2
<?php wp_enqueue_script("jquery"); ?>
<script src="<?php bloginfo(template_url); ?>/js/custom.js" type="text/javascript"></script>

3. Open custom.js and copy/paste the following code:

1
2
3
4
5
6
7
8
9
10
11
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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

  1. Display ads in WordPress depending on what site the visitor comes from
  2. WordPress Ecommerce Plugin – PHPurchase
  3. Wordpress Membership Plugins and Resources
  4. WordPress Ecommerce Plugins, Themes and Tutorials
  5. Win WordPress Hosting and ElegantThemes subscription

2 Comments For This Post

  1. Tim Holt

    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.

  2. ThemeDigital

    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) ? :D

    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! :)

What do you think of this?