Add Title and Alt Attribute to WordPress Image the_post_thumbnail

Updated December 28, 2016     18 Comments
Originally posted September 16, 2013

SEO, WordPress Code Snippets

Updated for WordPress 4.7 which no longer automatically adds the alt attribute to featured images.

The WordPress default themes call the image thumbnail like this:

the_post_thumbnail();

By default, the image returned does not have a title or alt attribute. (Since WordPress 4.7, the alt attribute is no longer added automatically. It will only have an alt attribute if you specifically entered “Alt text” while uploading the image, or if you go back to the Media library and enter “Alt text” for the image.)

I find that website traffic from Google search is considerably higher if your images all have title attribute tags, as well as alt tags. So, I add the title and alt attributes to post thumbnails with the following function which goes in your functions.php. The value for the title and alt attributes will be taken from the title of the image, which is the title of the attachment (not the actual post title).

Line 5 adds the title attribute to the featured image. Line 6 adds the alt attribute. You can remove either line if you prefer to omit it.

function isa_add_img_title( $attr, $attachment = null ) {

	$img_title = trim( strip_tags( $attachment->post_title ) );

	$attr['title'] = $img_title;
	$attr['alt'] = $img_title;

	return $attr;
}
add_filter( 'wp_get_attachment_image_attributes','isa_add_img_title', 10, 2 );

If you prefer the title attribute to be taken from the actual post title (instead of the image attachment title), then change line 5 to this:

$attr['title'] = the_title_attribute( 'echo=0' );

See more: ,

We've 18 Responses

  2. April 27th, 2014 at 5:39 am

    Hi Isabel.

    I just wanted to say a huge thanks to you and your article. I had 1000s of images that were appearing without the title tag. Most of which were either a bug of wordpress or a bug of my template, I think the latter.

    Your code assisted me with what to search for and how to update it and I believe I’ve almost fixed all of the issues!

    Big help, love your work, thank you!

    Byron

    Reply ↓
    PixelRush Studio

  3. August 3rd, 2014 at 9:51 am

    Thank you Isabel – I had been battling with this issue for several hours and your code did the trick for me. I also managed to automatically pull the ALT text from a custom field, so now my post thumbnails are all auto-assigned the correct Alt and Title tags.

    Reply ↓
    Yasser Hussein

  4. November 12th, 2014 at 2:05 am

    hello,

    how can i change the code to use it for ALT-Tag?
    And second question: How can i add own text after the automaitcly insert title?

    thanks fpr great snippet and help.

    Reply ↓
    Dennis

    • November 12th, 2014 at 10:45 am

      The alt tag is already added by WordPress, but it uses the image title text. If you want the alt tag to use the post title instead, change line 2 to this:

      $attr['alt'] = the_title_attribute( 'echo=0' );

      To add your own text after the post title, use this instead:

      $attr['alt'] = the_title_attribute( 'echo=0' ) . ' YOUR CUSTOM TEXT HERE';

      Replace “YOUR CUSTOM TEXT HERE” with your own text.

      Reply ↓
      Isabel

  5. June 9th, 2016 at 7:10 pm

    Thanks a lot for sharing it.

    It worked like a charm for me. I needed to create a new attribute (data-caption) for a lightbox caption on www.superlumina.com.br sites, as title attribute is not a good acessibility practice anymore.

    Thanks again.

    Reply ↓
    Celso Bessa

  6. December 27th, 2016 at 9:11 am

    HOw to add thumbnail image name as alt tag?, i mean img name as alt tag?

    YOu said, this thumbnail image as title name->

    function isa_add_img_title( $attr, $attachment = null ) {
    //$attr['title'] = trim( strip_tags( $attachment->post_title ) );
	$attr['title'] = the_title_attribute( 'echo=0' );
    return $attr;
}
add_filter( 'wp_get_attachment_image_attributes','isa_add_img_title', 10, 2 );

<?php if ( has_post_thumbnail() ) {
		
		the_post_thumbnail('thumbnail', array( 'title' => the_title_attribute( 'echo=0' ) ));											
		
		} 
		
		?>
    Reply ↓
    shan

      • December 29th, 2016 at 2:06 am

        Fine, thats cool, may i know how to add the thumbnail image name as alt tag, i mean, get the thumbnail name, not a post tiltle as alt tag, need a image name as alt tag.

        and i have added alt tag in every image, but the same image in thumbnail size 150*150, doesnt have alt tag, it was not displayed anywhere, but i tested seo, it displayed some images doesnt have alt tag.

        Reply ↓
        shan

        • December 29th, 2016 at 3:42 am

          May be this will solve the missing alt for every image, replace image title as post title

          function add_alt_tags($content)
{
        global $post;
        preg_match_all('/<img (.*?)\/>/', $content, $images);
        if(!is_null($images))
        {
                foreach($images[1] as $index => $value)
                {
                        if(!preg_match('/alt=/', $value))
                        {
                                $new_img = str_replace('<img', '<img alt="'.$post->post_title.'"', $images[0][$index]);
                                $content = str_replace($images[0][$index], $new_img, $content);
                        }
                }
        }
        return $content;
}
add_filter('the_content', 'add_alt_tags', 99999);
          Reply ↓
          shan

  9. April 2nd, 2017 at 9:34 am

    Thanks a lot for this great work.
    Just test it in WordPress 4.7.3. Works fine with it. All Pictures have title and alt attributes from the name of the File.

    Great work!

    Reply ↓
    Chris

  10. May 30th, 2018 at 12:10 pm

    Thanks for the code Isa,

    I have been searching for several hours beforehand and your post made me understand a bit more how to do it. Was actually struggling with image attachment when linked to custom taxonomy term. But I also needed the image attributes for my post thumbnails..

    We can also get the real “Alt” attribute typed in the media library form doing this : 

    
function isa_add_img_title( $attr, $attachment = null ) {
 
    $img_title = trim( strip_tags( $attachment->post_title ) );
	$img_alt = trim( strip_tags( get_post_meta( $attachment->ID, '_wp_attachment_image_alt', true ) ) );
 
    $attr['title'] = $img_title;
    $attr['alt'] = $img_alt;
 
    return $attr;
}
add_filter( 'wp_get_attachment_image_attributes','isa_add_img_title', 10, 3 );
    Reply ↓
    François

Questions and Comments are Welcome

Your email address will not be published. All comments will be moderated.

Please wrap code in "code" bracket tags like this:

[code]

YOUR CODE HERE 

[/code]