(This post assumes you are familiar with creating custom meta fields)
It’s always bugged me when incorporating a meta field image attachment into a template, I find myself typing in the alt=”” contents when in the media section for any given image, there’s a field for alt text. I want to use the content in the alt text field to populate the alt tags in my theme or template, but I haven’t been able to find the solution until last night when I finally got fed up creating another group of image containers and facing the same old conundrum of typing the alt text in manually or calling the post title, maybe the post excerpt. The right thing to do is get the alt text from the image attachment. This time I simply could no longer ignore the fact that somehow, I could get the alt text for an image delivered by a custom meta field. So, I did it. Life is better.
Getting the alt content for a featured image or an image in the theme customizer is well documented online. But I struggled as I said, trying to acquire alt content from a media attachment for a meta filed. I could, and have just used the post_title like so:
The above certainly provides alt text. It prints the post title. But it’s not consistent and we are not using the resource precisely. We are printing the post title and not the intended resource found in the media post type.
So, how to get the image alt for an image attachment produced in a theme or template via custom meta field:
// Get the URL of the custom meta image field
$get_image_url = get_post_meta(get_the_ID(), 'post-meta-field-id', true);
// Gets the custom post type image id
$get_image_id = attachment_url_to_postid($get_image_url);
// Get's the alt text from the image
$alt = get_post_meta ( $get_image_id, '_wp_attachment_image_alt', true );
echo $alt;
I’ll explain the code above:
The ‘post-meta-field-id’ can cause some confusion here if you are not already familiar with creating custom meta fields. Although there is a plugin available that allows easy creation of meta fields, called Advanced Custom Fields, I prefer to use my own code that I’ve developed over time. It’s a benefit to your clients to utilize your own crafted plugins because you are providing sound, tested, proven functionality without the noisy adds that are common in many of the free solutions available in the plugin repository. Some plugins are heavy on the database as well, loading scripts and features simply not needed for a given website. Anyway, sorry to digress… The ‘post-meta-field-id’ entry is from the code producing your meta field. It’s the callback that produces the content so it can be delivered on the front end… and it’s looks like this (poke around, it’s in there):
I am not trying to demonstrate how to create a meta field as much as I’m providing a reference since this post is for the tech who understands the process of creating meta fields.
Using attachment_url_to_postid associated the image id with the url to said image obtained via $get_image_url. I think using this method could create a load on the server if we are processing thousands of files on a single page. But, to that I say “isn’t processing thousands of files on a single page a problem in and of itself?”
The best part here is _wp_attachment_image_alt. This is where the alt test is delivered in the variable $alt
So, here’s how your in your theme or template will look based on the above solution:
I know there’s other ways to do this and maybe I could have written my examples differently. This is just my way of accomplishing a task as of today. I will update this post with your insights and improvements as they most certainly will come.
What are your thoughts/questions?
Hi Chris,
Thank you very much for the article. I was looking for this and it was very helpful to me.
Glad it helped you!
Hi Chris
I have been looking how to add alt tags to my website. The theme has been altered so none of the alt tags work. I have tried adding code to function.php but nothing seems to make any difference. The website is embarkboathire.com.au
Any assistance would be very gratefully received.
Thanks
Danny
Hi Danny,![]()
tag :
My code is intended to be entered into the theme files for use with a custom meta field. That said, I can understand what you are dealing with as not all themes support alt=”” tags. You could create a child theme and then edit your templates by adding the below code “inside” the
The approach below is used where your image tags are not inside a function. Where you ‘can’ embed Php inside the theme’s html. Not all themes are coded the same, but this is a start. So, inside your child theme where you have images add the following :
$get_image_id = attachment_url_to_postid($get_image_url);
$alt = get_post_meta ( $get_image_id, '_wp_attachment_image_alt', true );
echo 'alt=" ' . $alt . ' " '; ?>
//Example:
<img src="<themes/path/to/image>" <?php
$get_image_url = get_post_meta(get_the_ID(), 'post-meta-field-id', true);
$get_image_id = attachment_url_to_postid($get_image_url);
$alt = get_post_meta ( $get_image_id, '_wp_attachment_image_alt', true );
echo 'alt=" ' . $alt . ' " ';
?> />
Of course this assumes your theme is pulling images from a meta-field. Let me know what you find and I’ll try to help more.
–
Chris
Hi Chris
So i have a child theme whereabouts would the code go in the functions.php file?
I cant thank you enough for getting back to me.
Danny
You can put my example in your theme template file for the given post-type. Basically, it “might” look like this within the template but probably not. I suspect the code shared was via your web inspector? That said, based on what you provided here’s my example:
<div class="news-block-image">
<a href="https://www.embarkboathire.com.au/sydney-catamaran-cruises/" title="Reasons For Choosing Sydney Catamaran Cruises" rel="bookmark nofollow">
<?php
// Get the URL of the custom meta image field
$get_image_url = get_post_meta(get_the_ID(), 'some-post-meta-field-id', true);
// Gets the custom post type image id
$get_image_id = attachment_url_to_postid($get_image_url);
// Get's the alt text from the image
$alt = get_post_meta ( $get_image_id, '_wp_attachment_image_alt', true );
?>
<img src="<?php echo $some_image_path; ?>" alt="<?php echo $alt; //This is the important part, the alt is output here ?>" /> </a>
</div>
If you were to put my example into functions.php it would look like this
add_action ( 'add_alt_hook', 'add_alt' );
function add_alt() {
// Get the URL of the custom meta image field
$get_image_url = get_post_meta(get_the_ID(), 'some-post-meta-field-id', true);
// Gets the custom post type image id
$get_image_id = attachment_url_to_postid($get_image_url);
// Get's the alt text from the image
$alt = get_post_meta ( $get_image_id, '_wp_attachment_image_alt', true );
echo '<img src="' . $some_image_path . '" alt="' . $alt . '" /> </a>';
}
?>
Then, in your template you would replace your <img> tag.
Ex:
<div class="news-block-image">
<a href="https://www.embarkboathire.com.au/sydney-catamaran-cruises/" title="Reasons For Choosing Sydney Catamaran Cruises" rel="bookmark nofollow">
<?php do_action('add_alt_hook');?>
</div>
Hi Chris
Thanks so much for getting back to me. So i bit of an update. I change a slider plugin which added the alt tag for most of them.
Still got issues with blog and category thumbnails.
This is the code to give you an idea.
Thanks
Danny
Hey Danny, Although I have provided some examples, they may not effectively address your specific theme and how it’s coded. I’d really need need to see the code you are working with to provide a good/working reply.
I would like to ask if is possible to create a special custom field, using ACF, for images, to be seen as “alt text”, instead using the default wordpress alt text fields.
Hey Marcel,
I know this is late. Just in case someone else is looking for a similar answer, I don’t see why one couldn’t use ACF to create a an alt input. That said, I don’t have much experience with ACF but it is a solid tool for many in accomplishing custom meta fields.