Open external links in New Tab or Window in WordPress

Posted by on Jan 21, 2013 in WordPress ·

Almost every blog needs to have links to third party site/s in their posts. Generally internal links are opened in the same tab (with _self target or no target) and external links in new tab (with _blank target). The target can be set while placing the link in your post. But there is possibility of forgetting to set the target or even your co-author doesn’t have set _blank target for external links in his/her posts. This increases the bounce rate of your site. Better you do something which will make all the external links to open in new tab by default, even if the target is not set.

You can use WordPress plugins to do this. But I personally don’t like so many plugins have installed in my blog. You can do this job very easily without any plugin.

All you need is just to put the following code between the <head></head> tag of your theme’s header.php file.

Code:

<script type="text/javascript">//<![CDATA[
	function external_links_in_new_windows_loop() {
		if (!document.links) {
			document.links = document.getElementsByTagName('a');
		}
		var change_link = false;
		var force = '';
		var ignore = '';

		for (var t=0; t<document.links.length; t++) {
			var all_links = document.links[t];
			change_link = false;

			if(document.links[t].hasAttribute('onClick') == false) {
				// forced if the address starts with http (or also https), but does not link to the current domain
				if(all_links.href.search(/^http/) != -1 && all_links.href.search('http://www.wpseobuzz.com') == -1) {
					// alert('Changeda '+all_links.href);
					change_link = true;
				}

				if(force != '' && all_links.href.search(force) != -1) {
					// forced
					// alert('force '+all_links.href);
					change_link = true;
				}

				if(ignore != '' && all_links.href.search(ignore) != -1) {
					// alert('ignore '+all_links.href);
					// ignored
					change_link = false;
				}

				if(change_link == true) {
					// alert('Changed '+all_links.href);
					document.links[t].setAttribute('onClick', 'javascript:window.open(\''+all_links.href+'\'); return false;');
					document.links[t].removeAttribute('target');
				}
			}
		}
	}

	// Load
	function external_links_in_new_windows_load(func)
	{	
		var oldonload = window.onload;
		if (typeof window.onload != 'function'){
			window.onload = func;
		} else {
			window.onload = function(){
				oldonload();
				func();
			}
		}
	}
	external_links_in_new_windows_load(external_links_in_new_windows_loop);
	//]]></script>
Last updated on : June 13, 2013.

6 Comments on “Open external links in New Tab or Window in WordPress”

  1. Hi Animish,

    Can you please send me the code as text? Would be great since I have a theme that every programmer failed to integrate the feature ..

  2. Thank you for your article. I was trying to open a pdf file on a page as new window. Your code works fine but all the navigation menus starting open as a new window. (home about contact etc..) Is there any way I can apply only the link in a page not navigation menu links?
    Thank you!

    1. Hello,

      Firstly, check if your menu contains proper links. This code shouldn’t open internal links in new tab (i.e. the links which contain the domain of your site).

      Then, make sure you want to open all the external links in new tab. If you have only one PDF link to open in a new tab, then it makes more sense to add target="_blank" in that particular link and not use the code mentioned in this post.

Leave a Reply