How to Open External Links in a New Window or Tab with WordPress

Understanding the Importance of Opening External Links in a New Window/Tab

When you link to external websites from your WordPress site, you’re essentially sending your visitors away. While this is sometimes necessary (and even beneficial, like citing sources), you want to ensure your audience can easily return to your content. Opening external links in a new window or tab achieves this by keeping your website open in their current window while the linked site loads separately. This improves user experience, encourages visitors to spend more time on your site, and can indirectly benefit your SEO. Leaving external links to open in the same window might result in the visitor forgetting how to return to your original site, reducing engagement and potentially lowering your website’s ranking over time.

Method 1: Manually Adding Target=”_blank” to Links

This is the most direct approach and gives you the most control over individual links. It involves directly modifying the HTML code of your links to include the `target=”_blank”` attribute.

How to Add Target=”_blank” in the Classic Editor

• Open the post or page you want to edit in the WordPress Classic Editor.
• Locate the text where you want to insert the external link.
• Highlight the text and click the “Insert/edit link” button (the chain icon).
• Enter the URL of the external website.
• Click the “Link Options” (gear icon) next to the URL field.
• Check the box that says “Open link in a new tab.”
• Click “Add Link.” The editor will automatically add the `target=”_blank”` attribute to the HTML code.
• Update or Publish your post/page.

If you prefer directly editing the HTML:

• Click the “Text” tab in the top right corner of the Classic Editor. This will switch to the HTML view.
• Find the `` tag for the link you want to modify. It will look something like this: `Example Link`
• Add the `target=”_blank”` attribute inside the `` tag: `Example Link`
• You can also add `rel=”noopener noreferrer”` for security and SEO reasons. The final code would be: `Example Link`
• Click the “Visual” tab to return to the visual editor.
• Update or Publish your post/page.

How to Add Target=”_blank” in the Block Editor (Gutenberg)

• Open the post or page you want to edit in the WordPress Block Editor.
• Select the text or block containing the link you want to modify.
• Click the link icon in the block toolbar (it looks like a chain).
• Enter the URL of the external website.
• Click the “Open in new tab” toggle (it will turn blue when enabled).
• Update or Publish your post/page.

If you prefer directly editing the HTML:

• Click the three vertical dots (options menu) on the block containing the link.
• Select “Edit as HTML.”
• Find the `` tag for the link you want to modify, similar to the Classic Editor.
• Add the `target=”_blank”` attribute inside the `` tag: `Example Link`
• Add `rel=”noopener noreferrer”` for security and SEO reasons: `Example Link`
• Click the three vertical dots again and select “Edit visually” to return to the visual editor.
• Update or Publish your post/page.

Method 2: Using a WordPress Plugin

Several plugins can automatically add `target=”_blank”` to all external links on your website, simplifying the process. This is especially useful if you have a large website with numerous external links.

Popular Plugins for Opening External Links in New Tabs

Several plugins offer similar functionalities, but here are a few popular and reliable options:

• **Open External Links in a New Window:** A straightforward plugin dedicated to this specific task. It’s easy to use and has minimal settings.
• **External Links – nofollow, new tab:** This plugin provides more advanced options, including the ability to add `nofollow` attributes and custom icons to external links.
• **WP External Links:** Another robust plugin with a wide range of features for managing external links, including opening them in new tabs, adding `nofollow` attributes, and more.

Installing and Configuring a Plugin (Example using “Open External Links in a New Window”)

• From your WordPress dashboard, go to “Plugins” > “Add New.”
• Search for “Open External Links in a New Window.”
• Find the plugin by WebFactory Ltd and click “Install Now.”
• Once installed, click “Activate.”
• Navigate to “Settings” > “Open external links in new window” (or a similar settings page provided by the plugin).
• Generally, the plugin will have a simple checkbox to enable opening external links in a new window. Enable this option.
• Some plugins may offer additional settings, such as applying the setting to specific post types or excluding certain domains. Configure these settings as needed.
• Save your changes.

Remember to test the plugin after installation to ensure it’s working correctly and not interfering with any other plugins or your website’s functionality.

Method 3: Using JavaScript/jQuery (Advanced)

This method involves adding JavaScript code to your theme to automatically add `target=”_blank”` to all external links. This requires a basic understanding of JavaScript and how to add code to your WordPress theme. **Use caution when editing your theme files, as incorrect modifications can break your website.** It is best to create a child theme for any modifications.

Steps to Implement JavaScript Solution

• Access your theme’s `functions.php` file. You can do this through the WordPress Theme Editor (Appearance > Theme Editor), but it’s highly recommended to use FTP or a file manager in your hosting control panel.
• Add the following code snippet to the end of your `functions.php` file:

“`php
function add_target_blank_to_external_links() {
?>

Explanation of the code:

• The `add_target_blank_to_external_links()` function contains the JavaScript code.
• `jQuery(document).ready(function($) { … });` ensures the code runs after the entire page has loaded.
• `$(‘a[href^=”http”]’)` selects all `` tags with an `href` attribute that starts with “http” (indicating an external link).
• `.not(‘[href*=”‘ + location.hostname + ‘”]’)` excludes links that contain the current website’s hostname (internal links). This prevents internal links from opening in new tabs.
• `.attr(‘target’,’_blank’)` adds the `target=”_blank”` attribute to the selected links.
• `.attr(‘rel’, ‘noopener noreferrer’)` adds the `rel=”noopener noreferrer”` attribute.
• `add_action(‘wp_footer’, ‘add_target_blank_to_external_links’);` adds the function to the `wp_footer` action, which places the code in the footer of your website.

Save the `functions.php` file.

Clear your browser cache and test your website to ensure the code is working correctly.

Important Considerations When Using JavaScript

• **Theme Updates:** If you directly modify your theme’s `functions.php` file, your changes will be lost when you update the theme. Using a child theme prevents this.
• **jQuery Dependency:** This code relies on jQuery. Most WordPress themes include jQuery, but if your theme doesn’t, you’ll need to ensure it’s loaded.
• **Performance:** While this code is generally efficient, excessive JavaScript can impact website performance. Test your website’s loading speed after implementation.
• **Accessibility:** While opening links in a new tab/window improves the experience for many users, it can be disorienting for some, especially those using assistive technologies. Consider providing a visual cue (e.g., an icon) to indicate that a link will open in a new tab.

Method 4: Modifying Your Theme (For Theme Developers)

If you’re a theme developer, you can modify your theme’s templates to automatically add `target=”_blank”` to external links when they are rendered. This provides the most seamless integration, as it becomes part of the theme’s core functionality.

Identifying the Relevant Template Files

The specific template files you need to modify will depend on your theme’s structure. Common places to look include:

• `single.php`: For single post templates.
• `page.php`: For page templates.
• `content.php` or similar: Often used for displaying the content of posts and pages.
• Template files for custom post types: If you’re using custom post types, you’ll need to modify their respective templates.
• Widget templates: If links are generated within widgets, you’ll need to modify the widget templates.

Modifying the Template Code

Once you’ve identified the relevant template files, you’ll need to modify the code that generates the links. This typically involves finding the `the_content()` function (or similar functions that output post content) and adding code to automatically add `target=”_blank”` to external links.

Here’s an example of how you might modify the code within a loop to add `target=”_blank”` to external links:

“`php

“`

• Explanation:
  • `get_the_content()` retrieves the post content.
  • `apply_filters( ‘the_content’, … )` applies WordPress’s content filters to the content. This is important to ensure that shortcodes and other content transformations are processed correctly.
  • `preg_replace()` performs a regular expression replacement to find all `` tags with an `href` attribute and add `target=”_blank”` and `rel=”noopener noreferrer”`.
  • `echo $content` outputs the modified content.

Important Considerations for Theme Developers

• **Child Themes:** Always make these changes in a child theme to prevent them from being overwritten when the parent theme is updated.
• **Regular Expression Accuracy:** Ensure that your regular expression is accurate and doesn’t inadvertently modify other parts of your HTML.
• **Escaping Attributes:** When generating HTML attributes dynamically, always escape them to prevent XSS vulnerabilities. In this case, the URL `$1` is already escaped by WordPress, assuming `get_the_content()` is properly using escaping during content creation.
• **Accessibility:** As with the JavaScript method, consider providing a visual cue to indicate that a link will open in a new tab.

Security Considerations

When opening external links in new tabs using `target=”_blank”`, it’s crucial to include the `rel=”noopener noreferrer”` attribute for security reasons.

Why rel=”noopener noreferrer” is Important

• **Security:** Without `rel=”noopener noreferrer”`, the linked page can access your website’s `window.opener` object, potentially allowing it to redirect your users to a malicious website or steal sensitive information. This is known as a “tabnabbing” attack.
• **`noopener`:** Prevents the new page from accessing the `window.opener` object.
• **`noreferrer`:** Prevents the new page from receiving referrer information (i.e., the URL of your website). This can improve user privacy.

By including `rel=”noopener noreferrer”`, you significantly reduce the risk of security vulnerabilities and protect your users from potential attacks.

Testing and Verification

After implementing any of the above methods, it’s essential to test thoroughly to ensure that external links are opening in new windows/tabs as expected and that there are no unintended side effects.

Testing Steps

• **Check Links in Different Browsers:** Test your website in different browsers (e.g., Chrome, Firefox, Safari, Edge) to ensure compatibility.
• **Check Links on Different Devices:** Test on desktop computers, tablets, and smartphones.
• **Check Links in Different Post Types:** If you’ve applied the changes globally, check links in posts, pages, custom post types, and widgets.
• **Verify `rel=”noopener noreferrer”`:** Inspect the HTML source code of the links to ensure that the `rel=”noopener noreferrer”` attribute has been added correctly.
• **Check for Console Errors:** Open your browser’s developer console and look for any JavaScript errors that might indicate a problem with your code.

By carefully testing and verifying your implementation, you can ensure that external links are functioning correctly and that your website remains secure and user-friendly.