Color for Anchor Tag Inside 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.

For Fresh Installs – If you are installing freshly theme and installing Pro with version

  • 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 and plugin

  • 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 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.

Receive our product updates, customer gift & daily product reviews