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

To enhance security and improve user experience on your WordPress site, it's crucial to manage external links carefully. Opening external links in a new tab can keep users engaged with your content while ensuring they don't lose their current place on your site. Additionally, adding rel="noopener" to links can mitigate potential security risks, such as the exploitation of the window.opener API by malicious websites.

Here's a comprehensive guide on how to automatically make WordPress open external links in a new tab and include rel="noopener" for added security using a custom function. This approach requires you to add a snippet of code to your theme's functions.php file or a site-specific plugin.

Step 1: Access Your Theme's functions.php File

• Navigate to your WordPress site's dashboard.
• Go to Appearance > Theme Editor.
• Select your active theme.
• Locate and click on the functions.php file in the right-hand side files list.

Step 2: Add Custom Function

Copy the following code and paste it at the end of your functions.php file. This function hooks into the_content filter to modify the output of your post content, automatically adding target="_blank" and rel="noopener" to all external links.

function wpb_autoblank_external_links($content) {
    // Retrieve the site's host name to compare with link's host
    $home_url = parse_url(home_url());
    $home_host = $home_url['host'];

    // Use preg_replace_callback to process all links in the content
    $content = preg_replace_callback('#<a(.*?)href="([^"]*/)?(.*?)"(.*?)>#', function ($matches) use ($home_host) {
        $url = parse_url($matches[3]);

        // Check if the link is external
        if (!empty($url['host']) && $url['host'] !== $home_host) {
            return '<a' . $matches[1] . 'href="' . $matches[2] . $matches[3] . '"' . $matches[4] . ' target="_blank" rel="noopener">';
        } else {
            return '<a' . $matches[1] . 'href="' . $matches[2] . $matches[3] . '"' . $matches[4] . '>';
        }
    }, $content);

    return $content;
}
add_filter('the_content', 'wpb_autoblank_external_links');

Step 3: Save Your Changes

After adding the code snippet, click on the "Update File" button to save your changes. This function now automatically adds target="_blank" and rel="noopener" to all external links in your post content, enhancing your site's security and user experience.

Why This Matters

• Security: The rel="noopener" attribute protects users by preventing the new page from accessing the window.opener property of the originating page, while rel="noreferrer" also prevents the passing of the HTTP Referer header, enhancing privacy.
• User Experience: Opening external links in a new tab helps maintain the user's presence on your site, potentially reducing bounce rates and improving engagement.

Best Practices

• Performance: While enhancing security and user experience, be mindful of the potential for excessive use of new tabs to negatively impact user navigation and performance.
• SEO: Ensure that the use of target="_blank" and rel="noopener" is balanced with SEO best practices, as excessive linking or incorrect use can affect your site's search ranking.

Adding this function to your WordPress site is a straightforward way to automatically manage external links for improved security and user experience.