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

Under maintenance; comment temporarily disabled.

Codegrad

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