Site-Wide Link Color and Hover Style
Sets the color, underline and hover color of links across a block theme through theme.json, so links look the same in the editor and on the site.
Opens WPIDE on
Code
// Link colors.
$wpide_link_color = '#1d4ed8';
$wpide_link_hover_color = '#1e3a8a';
add_filter( 'wp_theme_json_data_theme', function ( $theme_json ) use ( $wpide_link_color, $wpide_link_hover_color ) {
return $theme_json->update_with( array(
'version' => WP_Theme_JSON::LATEST_SCHEMA,
'styles' => array(
'elements' => array(
'link' => array(
'color' => array( 'text' => $wpide_link_color ),
'typography' => array( 'textDecoration' => 'underline' ),
':hover' => array(
'color' => array( 'text' => $wpide_link_hover_color ),
'typography' => array( 'textDecoration' => 'none' ),
),
':focus' => array( 'color' => array( 'text' => $wpide_link_hover_color ) ),
),
),
),
) );
} );Notes
Colors set later in Styles (Site Editor) still override these values.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.