Making all external links open in a new tab in WordPress

Last updated on February 11, 2013. Tags: , ,

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 tab and the links to another website (external link) in a new tab (new window in case of some older browsers).

WordPress' visual editor allows the webmaster to set the hyperlink as either opening in the same tab or in a new tab by inserting target attribute: target="_blank" to open the linked site to a new tab. If this target attribute is not present, the link will open in the same window. You can insert this attribute by checking the check box in the insert/edit link interface shown below.

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 in each of them.

Modifying links in the content and comment pages

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.

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

Simply replace domain.com with the actual domain of your site. If you are not sure on where to insert this code, please visit this article about functions.php.

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 (the add/edit interface with checkbox shown above), ensuring that there's only one of such attribute in each external link. You can remove this line actually since having two target="_blank" attribute will not affect the way the link works; it's just not a good programming practice.
  • 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.

This will still work if you are using an image map as long as it is part of the page content or comment (i.e. not hardcoded in the theme file).

The autoblank function was recently tested in WordPress ver. 3.5 and would likely work in close versions.

For other limitations of autoblank function, please visit this article.

Name of post commenter

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.

Posted by Greten on December 15, 2009 under WordPress

Read Comments
David Scott says:

Thanks for the code. Provides a simple solution to the external linking target without the need for a plugin.

Amy says:

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.

steve says:

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??

Peter F. says:

Tried it and it works!! Awesome, thanks for the great work

Greten says:

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?

Andre Greeff says:

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?

Greten says:

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?

Gyutae Park says:

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?

Greten says:

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.

Dana says:

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!

Greten says:

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.

Dana says:

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!

Greten says:

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.

Mike says:

I’ve been looking for that solution, for a while and found it finally… As I see that you still didn’t implement it…

This is what you might need:
http://urbangiraffe.com/plugins/pageview/

Plugin creates a custom field for link where to point the tittle…

Now I’m looking for a way to implement it in iFrame…
Any help would be appreciated…

Similar job, coupons :)

Thanks,
Mike

Mike says:

Update:

Can’t see now, but it might be that I posted a wrong link.. leading to iframe plugin, that I was looking for :)

Anyhow here is the one I wanted to post:
http://txfx.net/wordpress-plugins/page-links-to/

Mike

Guy says:

Hi, Great explanation of the code. Makes it VERY easy for a newbie like myself.

I am trying to do something a bit differently though..

I am trying to add a global

‘target=”webapp”‘ to all internal links only.

In other words, the ‘target=”web app”‘ should only be applied to menus, categories and posts. All other links are to be ‘target=”_blank”‘

Can you make any recommendations?

Thank you.

Greten says:

The method discussed in this post covers only the links that you can embed using the WYSIWYG editor of WordPress for the content of posts and static pages. For the links in the navigation menu, you need to edit the theme files that contain those navigations. It’s usually the header.php, sidebar.php or both.

Greten says:

@Mike – I don’t get it. You see that I still did not implement what?

Thanks for the code, I really needed these codes to implement on my website. I really appreciate what you have shared with us all.

ankur says:

hey this opening only our domain link open in new tab or all external link open in new tab or window ??
i m in a confusion ..
plz tell me ..??

And thanks for sharing..!!!

Greten says:

Whether it opens in a new window or a new tab depends on whether the browser has tab feature. It opens only external links in new window or tab.

Sergio says:

Thanks!!! At last, a proper code to do this that actually works!

Craig says:

Is there a way to make the search results page’s links pop up in a new tab. I was thinking this could be a great feature to have on sites where you want to do deeper searches and only on the search results do the links pop up in a new tab.

Thanks for the great tips.

Share your thoughts

Comment Rules and Reminders

  • The links to the commentator's website/webpage 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.
  • No links in the body of the comment itself. If referring to an external source is essential, please type the URL with space between each character e.g., codegrad.hub.ph becomes c o d e g r a d . h u b . p h. Do not hard code the URL as HTML link.
  • 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.
Codegrad

HTML, CSS, Javascript, search engine optimization, WordPress customization and other web development tutorials by Greten Estella