One of the things I like to do is open any external links (links that travel to other domains) on my Blogs with a new window. For Browsers that are capable of tabbed-browsing, it presents an extremely convenient way to organize your web surfing by domains. Of course, if you are still using the archaic Microsoft Internet Explorer, check out what you’ve been missing and download FireFox!

The reason to open external links in a new window is to retain the old window so that the users can come back to surfing your site, viewing more of your Blog! I blog using the WordPress 2.0 platform as its easily the most convenient platform to customize your Blog and plugins are plentiful to be found. I easily found some WordPress plugins that did the job

Zap_NewWindow plugin for WordPress - opens external domain links in a new window automatically!
Link Indication plugin for WordPress - adds an outgoing link icon to every external link; very customizable and configurable! (I’ve installed this plugin and you can see the difference on this post!)

However, I wanted to strike a balance between annoyance and usability. I wanted to be able to customize even further; to pick and choose which links I want to open in a new window. For example, I don’t mind if users are going to my other Blogs from AmBlogger and don’t wish to subject them to a new open window. The majority of web surfers are still using IE and I know it certainly annoys me if new windows open up without my trusty tab interface.

The solution was simple. Since I don’t use the WordPress visual rich editor to write my posts, I am going to add to the interface in the traditional editor! Here’s a step by step tutorial even for non-coders!

1. We are only going to edit one file, quicktags.js. This file can usually be found under
   <your WordPress Install Directory>/wp-includes/js/quicktags.js
2. Next, we are going to add the code to put a button called “ext link” on the editor interface. Find the following code snippet in quicktags.js.
   

   edButtons[edButtons.length] =
   new edButton(’ed_link’
   ,’link’
   ,”
   ,”
   ,’a’
   ); // special case

   Copy and past this code right below it! This is adding a button called “ext link” that you will use whenever you want an external link to be opened in a new window.

   edButtons[edButtons.length] =
   new edButton(’ed_extlink’
   ,’ext link’
   ,”
   ,”
   ,’x’
   ); // special case

3. We’re just getting started! Find the following code in the quicktags.js
   

   else if (button.id == ‘ed_link’) {
   document.write(’<input type=”button” id=”‘ + button.id + ‘” accesskey=”‘ + button.access + ‘” class=”ed_button” onclick=”edInsertLink(edCanvas, ‘ + i + ‘);” value=”‘ + button.display + ‘” />’);
   }

   And insert the following code right below it!

   else if (button.id == ‘ed_extlink’) {
   document.write(’<input type=”button” id=”‘ + button.id + ‘” accesskey=”‘ + button.access + ‘” class=”ed_button” onclick=”edInsertExtLink(edCanvas, ‘ + i + ‘);” value=”‘ + button.display + ‘” />’);
   }

4. We’re almost there! One more step left! We got to find the edInsertLink() function and add the new function edInsertExtLink() below that function. Here’s the code to add:
   

   function edInsertExtLink(myField, i, defaultValue) {
     if (!defaultValue) {
       defaultValue = ‘http://’;
     }
     if (!edCheckOpenTags(i)) {
       var URL = prompt(’Enter the URL’ ,defaultValue);
       if (URL) {
         edButtons[i].tagStart = ‘<a target=”_blank” href=”‘ + URL + ‘”>’;
         edInsertTag(myField, i);
       }
     }
     else {
       edInsertTag(myField, i);
     }
   }

You can probably use different implementations instead of target=”_blank”. For example, you can use window.open(this.href). However, AlexKing.org evaluates the pros and cons and still recommends target=”_blank” to be the more browser-friendly implementation.

There you have it! From now, on whenever you are inserting a link. You can use the “link” button for any links you want to open on the same window, and “ext link” for links that will open in a new window. You can use the short-cut key CTRL+ALT+X. It’s not the brainless way to achieve this, but it allows you to customize how you want to present the journey!

Note: I uploaded the quicktags.js file but could not see the change until I cleared my internet cache. You should be able to press CTRL-F5 to refresh the cache for most browsers when you’re on your editor screen!