External links in new tab/window: WordPress

Making all external links open in a new tab or window in WordPress

Last updated on November 28, 2011. Tags: external link, functions.php, HTML link rel

Website visitors need to know in one way or another if clicking on a link will lead to a webpage of the same site or to another website. One popular way of doing this is to open the links within the same website (internal links) in the same window and the links to another website (external link) in another window or tab.

Whether the linked site opens in a new window or a new tab depends on the browser. Hence, when I said " new window", it really means new window or new tab.

WordPress' visual editor allows the webmaster to set the hyperlink as either opening in the same window or in a new window by inserting target attribute: target="_blank" to open the linked site to a new window and target="_self" to open in the same window. The latter is useless because all browsers (at least, all major ones that many of us know) default to opening the link in the same window if no target was specified.

wordpress link interface

However, it can be time consuming to setup external links to open in a new window one by one. We need something that will allow WordPress to detect all external links, distinguish them from internal links and insert target="_blank" attribute to each of them.

To have WordPress insert target="_blank" attribute to all external links in the post, insert the following codes in "Theme functions" file (functions.php) of your WordPress theme. Simply replace domain.com with the actual domain of your site.

function autoblank($text) {
$return = str_replace('<a href = ', '<a target = "_blank" href = ', $text);
$return = str_replace('<a target = "_blank" href = "http://domain.com', '<a href = "http://domain.com', $return);
$return = str_replace('<a target = "_blank" href = "#', '<a href = "#', $return);
$return = str_replace(' target = "_blank">', '>', $return);
return $return;
}
add_filter('the_content', 'autoblank');
add_filter('comment_text', 'autoblank');

Be sure to insert it somewhere between the the very first <?php and the very last ?> in the functions.php. If there are other codes in between these and you are not sure where to insert, insert it immediately after the very first <?php or before the very last ?> with at least one character space of separation.

This code will insert target="_blank" to all external links in your content and comments. This is how it works:

The first line defines the function autoblank starting with an open bracket ({).
In the second line, the function autoblank inserts target="_blank" to all hyperlinks found.
In the third line, the function removes the target="_blank" if the domain happens to be your own domain.
In fourth line, the function removes the target="_blank" if the link is an anchor HTML link (i.e., link to a part of the same webpage)
The fifth line removes all the target="_blank" that you inserted manually using WordPress' visual editor, ensuring that there's only one of such attribute in each external link
The sixth line returns the results of second to fifth line.
The seventh line ends the function autoblank with a close bracket (})
In the eighth line, the function autoblank is applied to the content of the page or post.
In the nineth line, it is applied on the hyperlinks in comments. You can remove it if you do not want external links in comments to open in a new Window.

In the second to fourth line, you must delete all instances of "<a " if you are going to implement the title attribute to any of your hyperlinks. In most cases, you won't be needing it at all. The only time you need to include "<a " is if you are discussing HTML or any web development related topics in your blog because if you mention "href=" as a text and not as a hyperlink code, the autoblank function will also modify it (Addendum, Jan. 30, 2011).

For this to work, be sure that you are consistent in using either the www or non-www version of the domain. Even if you already implemented the URL canonization using .htaccess, you still need to change all non-www to www or all www to non-www (depending on which version you choose) for this code to work. You can do this by doing search and replace on the database, either manual or with the aid of a plugin. Another solution is to insert the function canonical in the functions.php to make all internal links consistent. However, if you opt for this method, the function canonical should come first in the functions.php before the function autoblank that we discussed in this entry.

Addendum (December 3, 2010)

One of the commenters in this post, Gyutae, is asking how to apply the autoblank function to the commenter's name that acts as link to his/her website (or no link if the website URL field in the comment form is left blank). I'm not sure if that's what Gyutae means but I think it is since applying the function to the link(s) within a comment is already covered by this post.

The answer is that, actually you don't implement this function to the name of the commenter. All you need to do is to open the comments.php of your WordPress theme and look for the following codes:

<a href="<?php comment_author_url(); ?>"><?php comment_author(); ?></a>

Then, just insert the target="_blank" code in the link tag as follows:

<a href="<?php comment_author_url(); ?>" target="_blank"><?php comment_author(); ?></a>

After implementing these changes, all the websites linked through the commenters' names will open in a new tab or window when you click them.

This technique was recently tested in WordPress ver. 3.0.3 and would likely work in close versions (Addendum, Jan. 30, 2011).

Posted by Greten on December 15, 2009 under WordPress

Share and Enjoy:

Read Comments

Posted by David Scott on 04.23.10 8:40 pm

Thanks for the code. Provides a simple solution to the external linking target without the need for a plugin.
Posted by Amy on 04.26.10 3:50 am

Thank you so much! This is exactly what I was looking for. I dropped it into my functions.php and it worked without a hitch.
Posted by steve on 08.13.10 4:50 pm

I tried this code in the functions.php..right after i clicked ‘update file’ I got this error message:

Warning: Cannot modify header information – headers already sent by (output started at /home2/unsports/public_html/wp-content/themes/Zeke2Col/functions.php:6) in /home2/unsports/public_html/wp-admin/theme-editor.php on line 89

Any idea how I can fix this??
Posted by Peter F. on 09.01.10 2:01 am

Tried it and it works!! Awesome, thanks for the great work
Posted by Greten on 09.22.10 2:03 pm

Sorry guys for the very late reply. Too busy to work to attend to this blog.

David, Amy, Peter>> You’re welcome ^_^
Steve>> The error message appeared when? When you updated the file or when you checked if its working?
Posted by Andre Greeff on 11.12.10 9:26 am

I tried adding this to my functions.php file, I couldn’t get to the file in question through my WordPress interface (closest I can get to is “theme functions.php”), so I edited the file and uploaded it manually.

Anyway, when I try load my page, I see the following error:
Fatal error: Call to undefined function add_filter() in /home/gecco/public_html/test/wp-includes/functions.php on line 33

You say this doesn’t need anything else, but I don’t see anything to define the add_filter() function, wouldn’t that need to be added earlier in the code?
Posted by Greten on 11.13.10 6:23 pm

Hi Andre,

I just reviewed this article and it looks like I forgot to include some of the precautions that I usually include in other codes meant to be inserted in the functions.php.

Yes, you are correct the functions.php is one of the theme files. Now, my question is when you inserted it, are there anything else in that file? If there are other codes and you are not sure where to insert it, I suggest you insert it either after the after the very first < ?php or before the very last ?>.

BTW, may I know what version of WordPress you are using?
Posted by Gyutae Park on 11.22.10 3:14 am

How do I also apply the autoblank function to the commenter links (which most of the time are external) as well as in author bios?
Posted by Greten on 12.02.10 4:31 pm

Hi Gyutae!

I think the ninth line of the code answers your question, or are you referring to the name of the commenter that serves as link to his or her website? If it’s the commenter’s name, please refer to the addendum.
Posted by Dana on 12.16.10 1:50 am

Thanks for much for this post!

Is it possible to have specific pages open in a new window? I have created a couple of pages & used the 301 redirect function. When I link those in a post, I would like it to open in a new window. Selecting “open in new window” from the post link box doesn’t work. I’ve also added a plug-in (Page Lists Plus) which doesn’t work either.

Example:
http://www.thecouponchallenge.com/coupons/redplum-com

Thank you!
Posted by Greten on 12.16.10 1:57 pm

Hi Dana, I could not access your site. I’m getting a message saying that it is not available in my area. So what did you do? Did you implement this tweak and then would like to have two of your internal pages open in new window? I’m somehow confused on what you are trying to say.
Posted by Dana on 01.15.11 11:17 pm

Hi!

Yes, I’d like to know if there is a way to have 2 of my internal pages open in a new window.

http://www.thecouponchallenge.com

Thanks!
Posted by Greten on 02.02.11 2:28 pm

Dana, you can try removing the fourth line if you used the technique discussed in this post. Then, manually set those links to open to a new window using the “target” dropbox. I also suggest you remove the 301 redirect and the plugin unless you use them for some other purpose.

Post Comments

Comment Rules and Reminders

The links to the commentator's e-mail do not have nofollow tag. However, I will be very strict in approving comments.
When you comment, please say something that indicates that you indeed read my post. If your comment is a general statement that can fit to any blog post about any topic, it will be regarded as spam.
What you write in the name field may include keywords to your website provided that (1) it's only up to four words long and (2) at least one of these four words is your first name or nickname. I rather reply to Bob or to Joe Smith than to Online Marketing Tips.
Please double check your comment before clicking the "Post" button. Once you clicked it, there will be no way for you to edit your comment.
Fields marked with asterisks (*) are required. Your email will never be displayed in public.

Making all external links open in a new tab or window in WordPress

Related Posts

You might also be interested (randomly generated):

Read Comments

Post Comments

Recent Blog Entries

Categories

RSS Feed