Add an indicator on link hover, for links opening in new tab (target=_blank)

This code adds an external link icon to all anchor tags with the target='_blank' attribute. It enhances the user experience by visually indicating that the link will open in a new tab or window.

Here are some advantages

1. Clarity for Users: The external link icon provides a clear visual cue to users, indicating links that will open in a new tab or window.
2. Consistency: Applying the functionality site-wide ensures a consistent visual representation for all external links with target='_blank', improving the overall user interface.
3. Accessibility: The additional icon assists users relying on assistive technologies, offering an extra clue about the behavior of external links.
4. Usability: Users can make informed decisions about opening links in new tabs/windows, enhancing the website’s usability and user flow.
5. Customization: The code can be easily customized to match the website’s design, allowing the external link icon to align with the overall branding and aesthetics.

          

            Copy
            
          
          function my_custom_script() {
    wp_enqueue_script( 'jquery' );
    wp_add_inline_script( 'jquery', 'jQuery(document).ready(function($) {
        $("a[target=\'_blank\']").each(function() {
            $(this).append(\' <span class="external-link-icon">\u2197</span>\');
            $(this).find(".external-link-icon").hide();
        });
        $("a[target=\'_blank\']").hover(function() {
            $(this).find(".external-link-icon").show();
            console.log("Link with target=\'_blank\' hovered");
        }, function() {
            $(this).find(".external-link-icon").hide();
        });
    });' );
	
?>
	<style>
	.external-link-icon {
	position:absolute;
    display: inline-block;
    font-size: 10px;
	margin-left: 5px;
    }
	</style>
<?php
    wp_enqueue_style( 'external-link-style', get_stylesheet_directory_uri() . '/external-link-style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_custom_script' );

          

            
              How to use this
            
            Copy