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

- Type: PHP
- Runs: Run everywhere
- Category: [Block Editor](https://wpide.com/library/category/gutenberg/)
- Tags: theme-json, links, colors
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/themejson-link-styles/

## Code

```php
// 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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Site-Wide Link Color and Hover Style" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/