# Icon After External Links

> Adds a small arrow icon after links in post content that point to other websites, so readers know they will leave your site.

- Type: PHP
- Runs: Frontend only
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: links, css, accessibility, content
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-external-link-icon/

## Code

```php
add_action( 'wp_head', function () {
    $host = wp_parse_url( home_url(), PHP_URL_HOST );

    if ( ! $host ) {
        return;
    }

    $own  = esc_attr( $host );
    $not  = ':not([href*="//' . $own . '"]):not(.no-external-icon):not(.wp-block-button__link):not(:has(img))';
    $sels = array();

    foreach ( array( '.entry-content', '.wp-block-post-content' ) as $scope ) {
        $sels[] = $scope . ' a[href^="http"]' . $not . '::after';
    }

    echo '<style id="wpide-external-icon">' . implode( ',', $sels ) . '{content:"\\2197";display:inline-block;margin-left:.2em;font-size:.8em;text-decoration:none;}</style>' . "\n"; // phpcs:ignore WordPress.Security.EscapeOutput -- built from escaped parts.
} );
```

## Notes

Your own domain is detected automatically. Exclude a link by adding the class no-external-icon to it.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Icon After External Links" 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/