How to automatically open external links in a new tab with WordPress
We use (and love) WordPress here at BestTechie, it has been our content management system of choice since 2006. That’s a long time. I’ve been using WordPress’ Gutenberg editor to create content and there’s one thing I found to be a bit finicky in the new editor: setting external links to open in a tab. After becoming frustrated enough with it I decided to figure out a way to have WordPress automatically open all external links in a new tab.
When adding links to a site, it is best practice to open external links in a new tab. Why? Well, for starters, if you don’t, you’re directing people away from your site to (possibly) never to return again. However, if you have the link open in a new tab (or window), once they’re done, your site will still be open and waiting for them. You want them to come back and keep clicking, don’t you?
Of course you do. I do.
Unfortunately, there is no direct setting in WordPress to do this. There should be, but there isn’t. So, in this post I will show you two super simple ways to have WordPress automatically open external links in a new tab.
How to automatically open external links in a new tab
The first method I’m going to go over to accomplish this feat is the way I personally did it on BestTechie. It’s pretty straight-forward but does require making a very minor edit to your WordPress theme’s footer.php file.
Method 1: insert this code in the footer.php
Open the theme’s footer.php file (Note: if you use a child theme and don’t have the footer.php file in your child theme folder, copy the footer.php file from the main theme folder and put it in the child theme folder before you do this).
Copy and paste the following code before the body and HTML closing tags:
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function($) {
$('a').each(function() {
var a = new RegExp('/' + window.location.host + '/');
if(!a.test(this.href)) {
$(this).click(function(event) {
event.preventDefault();
event.stopPropagation();
window.open(this.href, '_blank');
});
}
});
});
//]]>
</script>Save the footer.php file and make sure you re-upload it. If you use any caching plugins, be sure to clear the cache.
Once that code has been inserted and the file has been (re)uploaded, all external links (links that go to an outside domain) will be opened in a new tab while links leading back to your domain will stay in the same tab. This code will work for all posts and pages on your site (old and new).
The second method to accomplish the same feat is to utilize a WordPress plugin. I personally prefer to limit the total number of plugins I use on my site as much as possible and prefer code solutions if possible–that being said, this will work just as well if you don’t feel comfortable tinkering with theme files.
Method 2: install this WordPress plugin
The plugin is aptly named “Open external links in a new window” and you can find it in the WordPress plugin repository by searching for it. You can also download and upload it manually.
Once you have it downloaded and installed in WordPress, just activate it and that’s it. All external links will open in a new window. Super simple!
Method 3: Manually set links to “open in new tab”
This method is the simplest of the three. Whenever you insert a link on WordPress, you’ll see that directly underneath there is an option to select “open in new tab.” It can be done with any links you enter. The only issue with this method is room for human error, which is why we recommend the first two methods to ensure you don’t ever have to worry about whether or not you forgot to select it. Think of method 1 and 2 as external link insurance, if you will.
There you have it. Three ways to easily automatically open external links in a new tab. You can now rest assured knowing that your WordPress site won’t get lost in the mix because of your links.