This guide will tell you exactly how to set external links to open in a new tab on your WordPress site. You can do that for individual links or set your website to automatically open external links in new tabs across the whole site.
You’ve invested time and effort into creating valuable content for your WordPress website. When a visitor clicks a link to an external resource, you don’t want them to leave your site behind.
By default, these links open in the same browser tab, replacing your content and potentially ending the user’s session prematurely.
This can negatively impact key metrics like bounce rate and session duration.
The solution is to configure all external links to open in a new browser tab. This simple change improves the user experience by allowing visitors to explore other sites without losing their place on yours.
This guide will walk you through the primary methods to achieve this, from manual adjustments to fully automated solutions.
Method 1: The Manual Process (Step-by-Step Examples)
This method is built directly into WordPress and is ideal for manually setting individual links as you create content.
Example Using the Block Editor (Gutenberg)
If you use the modern WordPress block editor, follow these steps:
- Highlight Text: In your post or page, select the text you wish to turn into a link.
- Click the Link Icon: A small toolbar will appear above the text. Click the chain-link icon.
- Enter the URL: Paste the external website address into the box and press the “Submit” arrow (or Enter key).
- Enable “Open in new tab”: With the link now created, click on it again to bring up the link toolbar. You will see a toggle switch labeled “Open in new tab.” Click to enable it.
Your link is now set to open in a new tab.
Example Using the Classic Editor
If you are using the older Classic Editor, the process is slightly different:
- Highlight Text: Select the text you want to link.
- Click the Link Icon: In the editor’s toolbar, click the “Insert/edit link” icon.
- Access Link Options: A popup box will appear. Paste your URL, then click the gear icon to open the “Link options.”
- Check the Box: In the advanced options, find and check the box for “Open link in a new tab.”
- Add Link: Click the “Add Link” button to apply your changes.
Method 2: Using WordPress Plugins
For a site-wide, automated solution, plugins are an excellent choice. They handle all external links—past, present, and future—without requiring manual intervention for each one. Here are some popular plugins that offer this functionality.
- WP External Links: A comprehensive tool that provides extensive control over all external and internal links. You can set links to open in a new tab, add nofollow or noopener attributes, set link icons, and more.
- External Links in New Window / New Tab: A lightweight and straightforward plugin. Once activated, it uses JavaScript to make all external links on your site open in a new tab automatically.
- Rank Math SEO: Many all-in-one SEO plugins include this feature. Rank Math, for example, has a setting in its “General Settings” to open all external links in a new tab, combining SEO management with this useful UX feature.
Method 3: The Automated Code Solution with WPCode
For those who want to avoid adding another full-featured plugin, using a code snippets manager like WPCode is the perfect middle ground. It’s a safe and easy way to add functionality with simple code, and it even comes with a pre-built solution for this exact task.
First, install and activate the free WPCode plugin from the WordPress repository.
Option A: Use the Built-in WPCode Library Snippet
WPCode includes a library of ready-to-use snippets. The easiest way to accomplish our goal is to activate the one made for it.
- From your WordPress dashboard, navigate to Code Snippets > Library.
- Find the snippet titled “Open External Links in a New Tab.”
- This code snippet enhances a WordPress website by automatically opening external links in new tabs. When applied, the script runs after the page has loaded, identifying all hyperlinks within the content. If a link’s destination differs from the current page’s hostname, it modifies the link attributes to ensure it opens in a new browser tab, enhancing the user experience. This functionality improves website navigation by providing a seamless transition for visitors accessing external resources, contributing to a more user-friendly browsing environment.
- Simply click the “Use snippet” button, and on the next screen, toggle the switch to “Active” and click “Update.”
That’s it! The functionality is now active across your entire site.
Option B: Create a Custom Snippet Manually
If you prefer to create the snippet yourself, WPCode makes that easy too.
Go to Code Snippets > + Add Snippet.
Select “Add Your Custom Code (New Snippet).”
Add a Title: Name your snippet something clear, like “Custom – Open External Links in New Tab.”
Set Code Type: In the “Code Preview” section, select “PHP Snippet” from the dropdown menu.
Paste the Code: Copy and paste the following PHP code into the code box, which you can also find on the official WPCode Library here.
function open_external_URL_in_a_new_tab() {
?>
<script>
document.addEventListener('DOMContentLoaded', function () {
var links = document.querySelectorAll('a');
links.forEach(function (link) {
var url = link.getAttribute('href');
var parsedUrl = new URL(url, window.location.href);
if (parsedUrl.hostname !== window.location.hostname) {
link.setAttribute('target', '_blank');
link.setAttribute('rel', 'noopener noreferrer');
}
});
});
</script>
<?php
}
add_action('wp_footer', 'open_external_URL_in_a_new_tab');
Choose Insertion Location: Scroll down to the “Insertion” section. Leave the location as “Site Wide Footer” to ensure it runs on every page.
Activate: Toggle the snippet to “Active” at the top of the page and click “Save Snippet.”
Method 4: How to Handle Navigation Menu Links
The methods above generally apply to links within your content, but not your navigation menus. WordPress has a separate, built-in setting for this.
- In your dashboard, go to Appearance > Menus.
- At the top-right corner of the screen, click the “Screen Options” tab.
- A panel will slide down. Under “Show advanced menu properties,” check the box for “Link Target.”
- Close the Screen Options panel. Now, when you expand any item in your menu structure, you will see a new checkbox: “Open link in a new tab.”
- Check this box for any external links in your menu.
- Click “Save Menu.”
Conclusion
Controlling how links behave on your website is a small but impactful way to improve user experience and keep visitors engaged. Whether you prefer a quick manual fix, a dedicated plugin, or a lightweight code snippet, you now have a complete set of options to ensure your external links always open in a new tab. Choose the method that best fits your workflow and technical comfort level.
Frequently Asked Questions (FAQ)
Q1: Is opening external links in a new tab bad for accessibility?
It can be, as it may disorient users who rely on screen readers or have cognitive disabilities. However, it has become a widely accepted web convention. The key is consistency. If you choose to do it, apply it to all external links so the behavior is predictable for your users.
Q2: What does rel=”noopener noreferrer” do?
This is a security attribute. noopener prevents the newly opened tab from being able to control the original tab via JavaScript. noreferrer prevents the new site from seeing your page as the source of the traffic. The code snippets provided include this for best practice.
Q3: Will these methods slow down my website?
The manual and menu methods have zero performance impact. The JavaScript/WPCode solution is extremely lightweight and runs after the page loads, so its impact on perceived speed is negligible. A well-coded plugin should also have a minimal performance footprint.