Wordpress

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.

    
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' );

Leave a Reply