'how do i retrieve and display the alt text of an image in wordpress?

how do i retrieve and display the alt text of an image in wordpress? trying to substitute the title for the alt. here is the original code.

<?php while ( have_posts() ) : the_post(); ?>

  <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
   <header class="entry-header">
    <h1 class="entry-title"><?php the_title(); ?></h1>

so in the h1 i want:

<h1 class="entry-title">"alt text of image"</h1>

tried putting it in a variable like so:

 $alt_text = get_post_meta($img_id , '_wp_attachment_image_alt', true);
<h1 class="entry-title"><?php echo $alt_text; ?></h1>

but it doesn't show up. any solutions?

phpwordpressimagealt


Solution 1:[1]

First of all you need to get attachment ID for getting alt text..

Use this code to get that,

$img_id = get_post_thumbnail_id(get_the_ID());

Now add your code,

<?php $alt_text = get_post_meta($img_id , '_wp_attachment_image_alt', true); ?>
<h1 class="entry-title"><?php echo $alt_text; ?></h1>

Make sure that, your attachment Alternative Text is not empty...

You can add Alternative Text from wp-admin --> Media --> edit your attachment --> Alternative Text...

Solution 2:[2]

Can you please try below code:

<?php
$thumb_id = get_post_thumbnail_id(get_the_ID());
$alt = get_post_meta($thumb_id, '_wp_attachment_image_alt', true);
if( $alt ):
    echo $alt;
endif;
?>

Solution 3:[3]

I found a script, try if this works for you. Add this in your theme's functions.php file

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 );

Solution 4:[4]

I found this script working on my end, similar from Mukesh Panchal. I've tried other script from other but it didn't work.

<?php $thumb_id = get_post_thumbnail_id(get_the_ID()); 
$alt = get_post_meta($thumb_id, '_wp_attachment_image_alt', true); ?>
<img class="image" src="<?php echo $feature_image; ?>" alt="<?php echo $alt; ?>" >

Solution 5:[5]

The code below fixes this. When a page loads, it finds all of the images that are missing alt text and looks to see if you’ve specified an alt text for it in the Media Library. If so, it updates the image before loading the page.

add_filter( 'render_block', function( $content, $block ) {
    if( 'core/image' !== $block['blockName'] )
        return $content;

    $alt = get_post_meta( $block['attrs']['id'], '_wp_attachment_image_alt', true );
    if( empty( $alt ) )
        return $content;

    // Empty alt
    if( false !== strpos( $content, 'alt=""' ) ) {
        $content = str_replace( 'alt=""', 'alt="' . $alt . '"', $content );

    // No alt
    } elseif( false === strpos( $content, 'alt="' ) ) {
        $content = str_replace( 'src="', 'alt="' . $alt . '" src="', $content );
    }

    return $content;
}, 10, 2 );

Solution 6:[6]

<?php $image_id = get_post_thumbnail_id();
$image_alt = get_post_meta($image_id, '_wp_attachment_image_alt', TRUE);
$image_title = get_the_title($image_id);?>
<img alt="<?php echo $image_title;?>">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Akshay Paghdar
Solution 2 Mukesh Panchal
Solution 3 aashutosh pandey
Solution 4 johnhenrygaspay
Solution 5 Gnanasekaran Loganathan
Solution 6

Related Questions