WordPress open external links on new tab (Code + Security)

To configure WordPress to open external links in a new tab while ensuring security and accessibility, you can implement a solution using JavaScript and a plugin for added convenience. Begin by adding a JavaScript snippet to your WordPress theme or child theme’s functions.php file. This snippet utilizes jQuery to target external links (<a> tags with href attribute starting with "http" or "https") and adds the target="_blank" and rel="noopener noreferrer" attributes. These attributes ensure that external links open in a new tab while mitigating security risks associated with window.opener vulnerabilities. It’s crucial to test this implementation thoroughly to ensure it functions correctly across different browsers and devices, maintaining a seamless user experience. Additionally, consider using a reputable WordPress plugin designed for managing external links and adding security attributes automatically, which simplifies maintenance and updates while enhancing overall site security.

Implementing JavaScript Solution

To implement the JavaScript solution, open your WordPress theme’s functions.php file and add the following code snippet:

// Enqueue custom JavaScript file
function custom_scripts() {
    wp_enqueue_script( 'custom-scripts', get_template_directory_uri() . '/js/custom-scripts.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'custom_scripts' );

Next, create a new JavaScript file named custom-scripts.js in your theme’s js directory (create one if it doesn’t exist) and add the following jQuery code:

jQuery(document).ready(function($) {
    // Open external links in new tab
    $('a[href^="http://"], a[href^="https://"]').not('[href*="' + window.location.hostname + '"]').attr('target', '_blank').attr('rel', 'noopener noreferrer');
});

This script uses jQuery to select all external links (<a> tags with href attribute starting with "http://" or "https://") that do not belong to the current domain (window.location.hostname). It adds the target="_blank" attribute to open these links in a new tab and includes rel="noopener noreferrer" for enhanced security, preventing potential vulnerabilities related to window.opener.

Ensuring Security and Accessibility

While implementing the JavaScript solution, it’s essential to prioritize security and accessibility considerations. Ensure that the JavaScript code is efficiently written to avoid conflicts with other scripts and plugins on your WordPress site. Test the functionality across different browsers and devices to verify that external links open in new tabs as intended, maintaining a consistent user experience.

To further enhance security, consider using a WordPress plugin designed specifically for managing external links and adding security attributes automatically. Plugins such as "WP External Links" or "Open External Links in a New Window" offer features to automatically apply target="_blank" and rel="noopener noreferrer" attributes to external links, simplifying the process and reducing the risk of manual errors. These plugins typically include settings for customization, allowing you to configure behaviors such as excluding specific domains or URL patterns from the new tab behavior.

By combining JavaScript implementation with a reputable WordPress plugin, you can effectively manage external links on your WordPress site, enhance security against potential vulnerabilities, and ensure a seamless user experience. Regularly update your plugins and monitor site performance to maintain optimal functionality and security standards. This approach not only meets SEO best practices by enhancing user navigation but also adheres to security guidelines to protect your WordPress site from potential threats associated with external link handling.