Announce Links That Open in a New Tab
Adds hidden "(opens in a new tab)" text and a small icon to links in post content that open a new window, so screen reader and keyboard users are not surprised.
Opens WPIDE on
Code
add_filter( 'the_content', function ( $content ) {
if ( false === stripos( $content, '_blank' ) || ! class_exists( 'WP_HTML_Tag_Processor' ) ) {
return $content;
}
// Mark links first, then add the hidden text right before each closing </a>.
$tags = new WP_HTML_Tag_Processor( $content );
while ( $tags->next_tag( 'a' ) ) {
if ( '_blank' === $tags->get_attribute( 'target' ) ) {
$tags->add_class( 'wpide-new-tab' );
}
}
$content = $tags->get_updated_html();
return preg_replace_callback( '#(<a\b[^>]*class="[^"]*\bwpide-new-tab\b[^"]*"[^>]*>)(.*?)(</a>)#is', function ( $m ) {
if ( false !== stripos( $m[2], 'opens in a new' ) ) {
return $m[0];
}
return $m[1] . $m[2] . '<span class="screen-reader-text"> (opens in a new tab)</span>' . $m[3];
}, $content );
}, 20 );
add_action( 'wp_head', function () {
echo '<style>.wpide-new-tab::after{content:"\2197";display:inline-block;margin-left:.2em;font-size:.8em;text-decoration:none;}</style>' . "\n";
} );Notes
The hidden text uses the screen-reader-text class most themes provide; the icon can be removed by deleting the ::after rule.
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.