How to Add ALT Text to Gravatar Images in Astra Theme?

In this tutorial, we’ll learn how to add ALT text to Gravatar images in Astra theme using a simple code snippets plugin.

Are you facing issues with accessibility on your WordPress website due to missing ALT text for Gravatar images when using the Astra theme?

Don’t worry; you’re not the only one. Many WordPress themes, including Astra, don’t provide an easy way to add ALT text to Gravatar images by default.

However, with a few lines of code, we can solve this problem and make our website more accessible. In this article, you’ll learn:

• Enabling Author Box without any plugins
• Steps to add ALT text to Gravatar images in the Astra theme
• Customizing the ALT text for Gravatar images

Let’s get started!

Steps to Add ALT Text to Gravatar Images in Astra Theme?

When you add an author bio with Gravatar in the Astra theme, you may find that the author images are missing ALT text by default.

Astra doesn’t provide an easy way to add ALT text to Gravatar images out of the box. However, with a simple code snippet, we can achieve this functionality.

Step 1: Enable Blog Pro Module

• Log in to your WordPress dashboard
• Install the Astra Pro Module to get all the features.
• Navigate to Dashboard > Astra > Dashboard
• Locate the “Blog Pro” module and click the “Enable” button
• Once enabled, you’ll see additional options for customizing your blog layout

Step 2: Enable Author Box in Single Post

• Log in to your WordPress dashboard
• Go to Appearance > Customize
• Navigate to the “Blog” section
• Click on “Single Post”
• Scroll down to the “Author Box” section
• Toggle the “Enable Author Info” option to enable it
• This will display the author’s Gravatar, name, bio on single post pages

Step 3: Install the Code Snippets plugin

• Log in to your WordPress dashboard
• Navigate to Plugins > Add New
• Search for “Code Snippets“
• Click “Install Now” and then “Activate”

Step 4: Add a new code snippet

• Go to Snippets > Add New
• Give your snippet a descriptive name (e.g., “Add ALT Text to Gravatar Images in Astra”)
• Paste the following code into the “Code” section
• Click “Activate” to save your changes

function wplogout_add_alt_to_gravatar($text) {
    $alt = get_the_author_meta( 'display_name' );
    $text = str_replace('alt=\'\'', 'alt=\''.$alt.'\' title=\'Gravatar for '.$alt.'\'',$text);
    return $text;
}
add_filter('get_avatar','wplogout_add_alt_to_gravatar');

Step 5: Customize the ALT text (optional)

The code snippet above uses the author’s display name as the ALT text for their Gravatar image. However, you can modify the code to use different text or even add additional information.

For example, to include additional ALT text, you can modify the $text variable as follows:

$text = str_replace('alt=\'\'', 'alt=\'Add Something here '.$alt.'\' title=\'Gravatar for '.$alt.'\'',$text);

Congratulations! Using the Code Snippets plugin, you’ve successfully added ALT text to Gravatar images in your Astra theme.

Check Out:

• How to Add Meta Description as Excerpt in Astra Theme?
• How to Display Related Posts in Astra Theme?
• How to Add Google Analytics to Astra Theme?

At the End

Adding ALT text to images is crucial in making your website more accessible and inclusive.

Following the steps outlined in this tutorial, you can easily add ALT text to Gravatar images in your Astra theme using the Code Snippets plugin.

It improves the user experience for visually impaired visitors and optimizes your website for better search engine visibility.