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.
Opens WPIDE on
Code
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 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.