How to Change the Color of Anchor Tag Inside a Heading Tag?

Color for Anchor Tag Inside Heading Tag

Previously with Astra, link added with the anchor tag set to inherit color from the heading tag. You might have observed this if you have tried adding an anchor tag <a> inside the heading tag ( h1 – h6).

For example –

  • If the following code is used to add a link in the heading –
    <h2>Learn from Yesterday <a href=”#”> Live for Today</a> Hope for Tomorrow</h2>
  • Then link “Live for Today” will have the same color as rest of the heading.

But this scenario is updated with Astra theme version 1.4.9 and Astra Pro version 1.5.0 Below is the information for existing installs and fresh installs.

For Fresh Installs – If you are installing freshly Astra theme with version 1.4.9 and above/ installing Astra Pro Addon plugin with version 1.5.0 and above.

  • Color for the link inside the heading tag will be different from rest of the heading.
  • For example – consider following code
    <h2>Learn from Yesterday <a href=”#”> Live for Today</a> Hope for Tomorrow</h2>
  • In the above code, color set for the heading will not be inherited by the link.
  • Color settings that are set with the theme ( customizer: Colors & Background > Base Colors > Link Color) will be applied to the link text i.e. “Live for Today”

For Existing Installs – If you already have installed the theme, plugin and are updating Astra theme to version 1.4.9 and above/ updating Astra Pro Addon plugin to version 1.5.0 and above.

  • After updating the theme and the plugin the existing scenario will not change.
  • That means link inside the heading will inherit color from the heading tag.
  • If you wish to set theme link color to link text inside the heading tag use following filter.

Filter to manually enable/disable the different link and heading color –

add_filter('astra_include_achors_in_headings_typography','__return_false');

Above filter will not allow link text to inherit color from the heading tag. Link text will display color that is set from the theme.

Note: Add above filter code to child theme’s functions.php file.

Was this doc helpful?
What went wrong?

We don't respond to the article feedback, we use it to improve our support content.

On this page

Take the First Step Toward Success Now.

You’re backed by an amazing team and a risk-free money-back guarantee!

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

This field is required.

REWIND

YEAR IN REVIEW

Scroll to Top
Now choose your preferred
page builder addon
Choose your preferred page builder addon

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form