Remove title attribute from images

by

I would strongly discourage this. A better, more sustainable practice would be to educate your clients on the value of the title attribute and teach them how to use it properly.

Simply removing it is putting a bandage on the symptom, not combating the disease.

However, if you do want to remove the attribute anyway, there are a couple of ways to do it:

Use a Content Filter

Post content runs through a filter before being displayed on the screen. This filter will do several things: transform quote marks into curly quotes, capitalize the P in WordPress, etc. It also handles shortcodes that are present in the content.

You can pass your content through a filter that uses regular expressions to find <img /> tags and remove the title attribute.

Use a Plug-in

A quick search of the plug-in repository returned Img Title Removal, a plug-in that claims to do exactly what you want. A quick look at the code shows it does option 1 exactly:

<?php
/*
Plugin Name: Img Title Removal
Plugin URI: http://www.glauserconsulting.com/2008/11/nu-agency/
Description: Filter plugin that removes all title tags from images in posts.
Author: Ivan Glauser
Version: 0.2.1
Author URI: http://www.glauserconsulting.com
*/

add_filter('the_content', 'remove_img_titles');

function remove_img_titles($text) {

    // Get all title="..." tags from the html.
    $result = array();
    preg_match_all('|title="[^"]*"|U', $text, $result);

    // Replace all occurances with an empty string.
    foreach($result[0] as $img_tag) {
        $text = str_replace($img_tag, '', $text);
    }

    return $text;
}
?>

Use JavaScript

A third option would be to dynamically remove the title attributes after they’ve been rendered on the page. If you absolutely must remove them, this is the system I’d recommend because the title will still be in the HTML code (for screen readers) but will be removed when the document loads so you avoid the “random, non-descriptive” tooltips.

Using jQuery, you can select all <img /> elements on the page that have a title attribute and remove it. Example:

jQuery(document).ready(function($) {
    $('imgRemove title attribute from images').each(function() { $(this).removeAttr('title'); });
});

Leave a Comment