Do you want to open external links from your blog posts in a new window?
Opening external links in a new window allows your users to visit the link without leaving your website.
Many beginners struggle with finding the option to open a link in a window mainly because it is not instantly visible when you are adding a link in WordPress.
In this beginner’s guide, we will show how to easily open external links in a new window on your WordPress site. We will also show different methods to do that, so you can choose the one that best suits you.
Why and When You Should Open External Links in a New Window?
External links are links to websites that you don’t own or control. Normally, if you add a link to an external website your visitors will simply leave your site by clicking on the link.
While some user experience experts say that you should not open external links in a new window, we do not agree with that.
You see, most users easily forget the last website they were visiting. If they have multiple tabs open then chances are that they will never be able to find your website again.
For better user experience, we recommend opening external links in a new window or tab. This way the original web page is not lost and users can resume browsing your website by switching back.
Another benefit of opening external links in a new window is increased page views and user engagement on your site. Users are more likely to return to the previous tab and finish reading the article.
Users who spend more time on your site are more likely to join your email newsletter, follow you on social media, leave a comment, and buy your products.
That being said, let’s take a look at how to easily open external links in a new Window in WordPress.
Open External Link in New Window in Gutenberg Editor
The new WordPress block editor has a built-in feature that lets you open external links in a new window. However the option is hidden behind a button which is why beginners often don’t notice it.
Simply edit a blog post or page where you want to add an external link. Next, select the text you want to link and then click on the insert link button (or press CTRL + K on Windows / Command + K on Mac).
This will bring up the insert link popup. Simply enter the link and then click on the down arrow next to it. This will reveal the option to open the link new tab.
Click to toggle the option and then press enter. Your selected text will now be linked, and you can preview it by visiting your website.
Open External Link in a New Window Using Classic Editor
WordPress introduced a new block editor with WordPress 5.0. Many users prefer to use the old editor by installing the classic editor plugin.
If you are still using classic editor, then we will recommend you to start using the new editor. It is modern, faster, and includes many new features that you are missing out.
However, if you still want to use the classic editor, then this is how you would open a link in a new window using the classic editor.
First, you need to edit the post or page where you want to add the link. Next, select the text that you want to link and then click on the add link button.
A popup would appear where you can add your external link. After that, click on the gear icon next to it. This will bring up the advanced insert link popup.
From here you need to check the box next to ‘Open link in a new tab’ checkbox and then click on the ‘Update’ button to add your link.
You can now save your post and preview it to see the link in action.
Open a Link in New Tab Using Text Tab in Classic Editor
If you are using the HTML editor labeled ‘Text‘ in the old classic editor, then here is how you would open an external link in a new window.
Simply select the text that you want to link and then click on the Add Link button. This will bring up the advanced Insert link popup.
From here, you can add the link and check the box next to ‘Open link in new tab’ option. After that click on the Add Link button and the popup will disappear. You will now see the HTML code for the link in the text editor.
You can now save your changes and view the post to see the external link in action.
How to Open External Links in a New Window using HTML
Sometimes you may need to write HTML to add a link in WordPress. For example, when you are using the HTML mode in the new block editor or adding a link in a WordPress theme template file.
You’ll need to add the link using the following HTML code.
<a href="http://example.com" target="_blank" rel="noopener">Link Text</a>
Simply replace the example.com with the external link URL, and the Link Text with the text you want to link.
The target parameter in this code tells browsers to open the link in a new window or tab.
Automatically Open All External Links in New Window with a WordPress Plugin
It may sound like extra work to manually check the option for every external link that you add. However, over time you will get used to it.
If you run a multi-author blog or often forget to make external links open in a new tab, then you can use a plugin for that.
First, you need to install and activate the Open External Links in a New Window plugin. For more details, see our step by step guide on how to install a WordPress plugin.
The plugin works out of the box, and it will automatically open external links in a new window.
It does not actually change the external links in your blog posts. Instead, it uses JavaScript to open external links in a new window.
Note: Keep in mind that deactivating the plugin will stop opening external links in a new window.
We hope this article helped you learn how to easily open external links in a new window in WordPress. You may also want to see our ultimate list of the most useful WordPress tips, tricks, and hacks that you can use on your website.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Thank you for sharing this tip, I would start following these methods from now on
Glad our guide could be helpful
Thank you Scott Swanson for your note. It wasn’t working for me, but when I disabled that plugin, it does. I guess I have to find another protection plugin to see if it’s only that plugin.
Greetings. please do you have the one with the feature if someone clicks external link it will take him to new page with click here to continue link? please can you suggest any plugin for this?
I downloaded this but the links still don’t open in a new window or tab.
Will not work with the WP Content Copy Protection & No Right Click plugin
How do you open external links (eg advertising) when the person on your blog plays any of the videos?
greetings! what I was looking for was a code to insert in functions.php that would do the trick without another plugin. so:
function wp_change_target($content){
return preg_replace_callback(‘/]+/’, ‘wp_target_callback’, $content);
}
function wp_target_callback($matches){
$link = $matches[0];
$mu_url = get_bloginfo(‘url’);
if (strpos($link, ‘target’) === false){
$link = preg_replace(“%(href=S(?!$mu_url))%i”, ‘target=”_blank” $1’, $link);
}elseif (preg_match(“%href=S(?!$mu_url)%i”, $link)){
$link = preg_replace(‘/target=S(?!_blank)S*/i’, ‘target=”_blank”‘, $link);
}
return $link;
}
add_filter(‘the_content’, ‘wp_change_target’);
Can anyone tell me how to open a MENU item in a new window? I don’t see an option in the Edit Menus page. I have an external link in a footer menu , that I’d like to open in a new window.
I downloaded the plugin but all my links still open up in my wordpress page.
On my side bar ads, I want them to open up in a separate page and leave my page open?
Same for all the links in the “find a professional menu” I want people to go to their links/sites but keep my site open so they will have it in front of them.
Help please?
mike
I think it is much easier to just handle this in the jQuery for the whole site… and never worry about it again. (Substitute your own domain name for mine, of course.)
// open all external links in a new window
$(“a[href^=’http’]”).not(“[href*=’demeyere.com’]”).attr(‘target’,’_blank’);
@demeyere Again, the plugin above is not using target _blank to make sure that the site validates with XHTML strict. But yes, your code will do the job as well.FYI for others reading: Now anyone can simply make a plugin and call this snippet in the header. It wouldn’t make any difference in the load time between you manually putting in your header or calling it via a plugin into wp_head() hook.
Hi
In earlier versions of wordpress, you selected the text you wanted to link to and then hit the link icon on the dashboard.
This opened a field in which you added the link.
Worked fine.
In latest wordpress versions, when I select the text and hit the link icon and paste in the link, the link appears at the top of the post – not surrounding the selected text.
Am I doing something wrong?
Plugin looks good but I’m trying to cut down on the number that I use.
@easyP It doesn’t work like that on our site. We are using 3.2.1. We select the text and hit the link icon, and it adds the link where it should. Are you using the Visual Editor or the HTML Editor?Also, any particular reason why you are trying to cut down on the number of plugins that you use?
@wpbeginner
Hi boys.
Number of plugins – trying to cut down because of page load time.
I love my theme, but it runs like a donkey.
I use the html editor when writing posts and I’m using wordpress 3.2.1 but when I select the text and hit the link icon – the link forgets the highlighted text and appears at the top of the post / page!
Any thoughts?
@easyP If you try to this trick without a plugin, you will end up doing the same thing. The impact of this plugin on your load time is barely noticeable.
@wpbeginner
Worth knowing that – thanks boys.
I just installed this plug-in. Kind of a funny name, Open External Links in a New Window, but certainly a great idea. Thanks!