Recently I was working on a WordPress site that contains a large number of external links both in the content and in the sidebars. One of the requirements for the external links is that they be designated by an icon, such as is common on many sites. I wanted to achieve two things with my solution:

• Create something simple so that the users don’t have to add CSS classes to links or fiddle with positioning images manually
• Prevent a developer from needing to constantly modify or tweak site styles whenever a user needs to add additional content

jQuery’s robust selectors work perfectly for this. Since TinyMCE (WordPress’ default Rich Text Editor) allows users to toggle a link so that it opens in a new window using the classic “target=_blank” attribute, I decided that I’d leverage this mechanism. The script for accomplishing this is short and sweet, a single line of jQuery and a couple lines of CSS styling. The script is here, with some formatting for readability:

<script type=”text/javascript”>

jQuery(‘a[target="_blank"]‘)

.attr({

title: “Opens in a new window”

})

.append(‘<span class=”external_link”>&nbsp;</span>’);

</script>

What this script does is search the DOM for any <a> tag that has the “target=_blank” attribute and add a span tag with the class “external_link”. With that in place, it’s a simple CSS class to handle the positioning and appearance of the external link image. This is what mine looks like: