Putting external link icon in WordPress

Last updated on February 1, 2010. Tags: , ,

Web page links may lead to either another page of the same website (internal links) or to another website (external links). With the way HTML works, there's no built-in way of differentiating these two kinds of link. Website developers, however, can provide a way for visitors to know which link goes outside the website and which link points to the same website.

One way of doing it, which I already discussed, is to have all internal links open in the same window and all external links open in another window (or tab). However, there are some claimed issues with regards to the useability of this; some web developers claim that the users are the one who should decide whether to open a link to the same window or to a new window.

While I personally do not believe in this idea, another popular way of differentiating internal and external links is by putting a small graphic, usually a square with an arrow pointing up-right (external-small). Wikipedia and other websites that run in Wiki CMS are just few of the websites that use this method.

Putting an external link graphic to your WordPress-powered website requires three steps:

  1. Configuring the graphic and uploading it to your hosting
  2. Setting up the CSS code of external link
  3. Inserting a PHP code in WordPress theme to detect all external links

I will explain these steps in details in the following sections.

Step 1. Configuring the graphic

Thanks to Wikipedia, the square with portruding arrow icon is now a universally recognized indicator of external link. You can download it here; it's a public domain image so you don't need to worry about copyright issues. Then, modify it to the color that suits the WordPress theme of your website using Photoshop or some other image editing software.

Another option is to make your own icon from scratch using either MS Paint or Photoshop (or other image editing software). Just be sure that it will be recognized as external link. Another variant is to have the arrow entirely inside the square.

After you created or modified the graphic, reduce it to the same height as the characters in your content area i.e. if the height of your text as defined in the CSS is 12px, then make the height of the external link graphic 12px. Then, upload it to /wp-content/themes/<your theme folder>/images/.

Step 2. Setting-up the CSS code

For this step, you need to open the style.css file that comes with your theme and insert the following CSS code:

.external {
	padding-right: 11px;
	background: url('images/external.gif') no-repeat right top;
}

In the above code, we decided to name the class "external" and the name of the external link icon graphic is external.gif. Just name the class with whatever you want and change the name of the graphic to the actual name of the file you saved and uploaded in Step 1. The padding 11 px is something you can adjust to ensure that the link text (or graphic) does not overlap with the external link icon.

Step 3. Automating the insertion of external link icon

Finally, open the functions.php file of your theme and insert the PHP code below. As usual, insert it in a way that it does not prevent other functions from working. If you're new to PHP, the safest place is t o insert it either right after the first <?php or right before the last ?> in functions.php. Replace www.domain.com with the actual domain of your website.

function autoicon($text) {
$return = str_replace('<a href=', '<a class="external" href=', $text);
$return = str_replace('<a class="external" href="http://www.domain.com', '<a href="http://www.domain.com', $return);
$return = str_replace('<a class="external" href="#', '<a href="#', $return);
return $return;
}
add_filter('the_content', 'autoicon');

This code will insert class="external" to all hyperlinks in all your content (posts and static pages) that points to pages outside your website. The "external" class is the class that we defined in CSS in Step 2, and inserting this class on a link means the external link icon we created in Step 1 will appear together with it. If you named this class with something else, just replace "external" with the name you've given.

This is how it works:

The code we discussed in Step 3 can work only if you've been consistent in your internal links, either as http://www.domain.com or http://domain.com only. In case you used both the www and non-www version of your domain throughout the site, you need to change all www to non-www or vice versa, whichever domain version you prefer.

You can make the domain in your internal links consistent by doing search and replace on the database, either manual or with the aid of a plugin. Another solution is to insert the function canonical in the functions.php to make all internal links consistent. However, if you opt for this method, the function canonical should come first before the function autoicon in the functions.php.

Miscellaneous

If you allow links in the comment text (the actual comment, not the name of the commentator) and you also want to differentiate internal and external links there, just add the following below the seventh line of the PHP code.

add_filter('comment_text', 'autoicon');

If you use to manually set the link target of external links to a new window or tab (using WordPress visual editor), and no longer want them to open in a new window since you're already using the external link icon, insert the following between the fourth and the fifth line of the PHP code.

$return = str_replace(' target="_blank">', '>', $return);
$return = str_replace('<a class="external" href="#', '<a href="#', $return);

Posted by Greten on January 30, 2010 under Cascading Stylesheet (CSS), WordPress tweaks

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • StumbleUpon
  • Technorati

Related Posts

You might also be interested (randomly generated):

Post Comments

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.





* Required. Your email will never be displayed in public.