How to Open External Links Open in New Tabs in WordPress

There are several different methods for making external links on your WordPress site open in new tabs or windows when users click on them. Here’s a rundown of some of the best alternatives.

This post may include affiliate links. Read more.

There are several different methods for making external links on your WordPress site open in new tabs or windows when users click on them.

Whether or not it is recommended practice is up for debate, but a common reason that you might want to do it is so that users can click on links without leaving your website. This can be especially useful if your post refers to multiple products side-by-side, for example. Or, if you’re writing a how-to guide that points to external resources as part of the process, users can click on those links, gets the files or information they need, and not lose their place in the guide.

Individual Links

These methods are baked into WordPress itself and don’t require any plugins or apps. They’re most convenient for individual links rather than sitewide behavior.

Using the Gutenberg Block Editor to Open Links in New Tab

If you’re writing and editing using the Gutenberg block editor (the standard editor in new recent versions of WordPress), when you go to add or edit a link, there’s a simple switch that lets you choose whether the link should open in a new tab or not.

WordPress Tips / How to Open External Links in New Tabs in WordPress

This is useful for individual links, but it only applies to that specific link. And it applies to whatever link you assign it to–it can be an external or an internal link.

Using the Visual Editor / WordPress Class Editor to Open Links in New Tab

The Visual Editor is the older WYSIWYG editor in WordPress. It has been replaced with Gutenberg Block Editor in more recent versions of WordPress.1

The Visual Editor also has the built-in option to open a link in a new tab. To find it, add a link using the chainlink icon from the editor toolbar.

WordPress Tips / How to Open External Links in New Tabs in WordPress

Then click on the small cog/gear icon just to the right of the URL.

WordPress Tips / How to Open External Links in New Tabs in WordPress

That will add a popup window. I’m only including the top part here, because that’s where the relevant setting is, but you’ll see a checkbox for “Open link in a new tab.”

WordPress Tips / How to Open External Links in New Tabs in WordPress

Again, this is useful for individual links, but it only applies to that specific link. It applies to whatever link you assign it to–it can be an external or an internal link.

Note that this isn’t limited strictly to the Visual Editor, as such. It actually works across the Classic Editor, which includes both the Visual Editor and Text Editor. If you switch to the Text Editor tab, you can still use this functionality by using the link button from the editor toolbar.

WordPress Tips / How to Open External Links in New Tabs in WordPress

Using HTML Code to Open Links in New Tab

If you’re writing links manually, you can add the target attribute to the link. To open the link in a new window or tab, use this:

target="_blank"

So the full code for a link might look something like this:

<a href="https://wordpress.org/plugins/classic-editor/" target="_blank" rel="noopener">html/text editor</a>

This is also a useful option to have if you want to adjust one or two links on a page. Switch to the HTML editor and insert the code in the relevant link.

Plugins to Open Links in New Tab

There are several plugins that can automatically add the _blank attribute on the fly as the page opens. These are especially useful if you want to apply the change across a whole site. And they can often add other link attributes, such as nofollow, noreferrer, or noopener.2

The best I’ve come across that still works with recent versions of WordPress and is updated regularly is WP External Links by WebFactory Ltd. It’s free.

You can use it to open external links in new tabs, but you can also do quite a lot more with external links. Nofollow and sponsored are useful for SEO. Noopener and noreferrer are useful for security. And you can also work with internal links, add exclusions, and several other useful features.

These are best used for sitewide applications. It is possible, though, to exclude links from it (as well as selecting just external or even just internal links).

Other Methods

Functions.php

It is technically possible to apply this behavior sitewide by adding code to your theme’s functions.php file. While I’ve come across a few different iterations, I haven’t found one that I’m confident enough in to include here. But a good WordPress developer should be able to code one for you that doesn’t conflict with other things on your site.

Markdown Links

The core (i.e., original) version of Markdown, or its common variants such as MultiMarkdown, don’t include provision for link attributes such as the target attribute. In those cases, the best options are to replace the markdown links with standard HTML links or to use one of the plugin options that modifies the links on the fly as the page is rendered in the browser.

That said, there are exceptions, such as for the customized markdown flavor used in the Hugo CMS. And some non-standard flavors of Markdown use this syntax:

[WordPress](https://wordpress.org){:target="_blank"}

  1. It’s possible to restore the older version and not use the Gutenberg Editor (which is what I do). Plugins like Classic Editor have this functionality. 
  2. These are “rel” attributes rather than “target” attributes, but they can still be applied using this plugin. 
by David Coleman

I'm a freelance travel photographer based in Washington DC. Seven continents, up mountains, underwater, and a bunch of places in between. My images have appeared in numerous publications, and you can check out some of my travel photography here. More »

Leave a Comment