Highlighting External Links within WordPress

You may have seen this symbol  next to links on various pages of the Web. It denotes that the link (which is usually placed before the symbol) is an external link.

If you’ve ever wanted to differentiate internal links from external links on your blog, there is a fairly simple way of doing it, and all it requires is a few lines of text added to your stylesheet.

In this post, we’ll show you how to do it.

Why differentiate between internal and external links?

Today, most people scan, they don’t read the full text of a blog. By representing your external links visually, visitors can see - at a glance - that you’ve given them quick access to relevant and related content that is not solely on your site. This is significant because the easier you make it for your visitors; the more information you supply, the more likely they are to subscribe to your RSS feed, or return to your site next time around.

How to differentiate between internal and external links on your blog

You won’t need to change anything on your existing posts; you’ll just need to make a few small changes to your style sheet.

This change will automatically update every post you have ever written.

Step 1: Copy the ‘external’ Image File

You need to copy the image file, external.gif, to the images sub-folder within your current WordPress theme folder.

Step 2: Add ‘external’ Image to Links

To create links that appear within posts as:

Add the following to your style sheet:

a
{
  background: url(/2008/07/06/highlighting_external_links_within_wordpress/images/external.gif) no-repeat right top;
  padding-right: 12px;
}
 

The right padding value of 12 pixels ensures that the image does not overlap the text of the link.

Step 3: Differentiate Between Relative and Absolute Links

A handy feature of CSS is that you can apply a style not only to a HTML tag, but optionally based on the contents of any of the HTML tag’s attributes.

For example, to apply the above style to only those link references which contain “http:”, you modify the style sheet entries as follows:

a[href^="http:"]
{
  background: url(/2008/07/06/highlighting_external_links_within_wordpress/images/external.gif) no-repeat right top;
  padding-right: 12px;
}
 

But this is only useful, if links to other posts are relative and not absolute links. An example of a relative link is ‘<a href=”another-post”>…</a>‘; whereas, an absolute link is ‘<a href=”http://blog.example.com/another-post”>…</a>‘.

Step 4: Exclude Absolute Links to Your Blog or Web Site

Now WordPress always uses absolute links. So to ensure that any link to your own blog or Web site does not have the external image applied, you follow the above style with entries which undo this change. The entries are specific to domain name of the blog or Web site.

For BlogWell, all our links start with http://blog-well.com. You will need to replace “http://blog-well.com” in the entries below with the domain name of your blog or Web site:

a[href^="http:"]
{
  background: url(/2008/07/06/highlighting_external_links_within_wordpress/images/external.gif) no-repeat right top;
  padding-right: 12px;
}
a[href^=http://blog-well.com]
{
  background: none;
  padding-right: 0px;
} 

Step 5: Add a Class to Exclude the ‘external’ Image

Sometimes you may want some links which go outside of your blog or Web site to not have the external image applied. You can do this on a case by case basis by using a link class of ‘noexternallink’. Within your post you would write the link as:

<a class='noexternallink' href='http://example.com'>Example</a>

And the style sheet would contain:

a[href^="http:"]
{
  background: url(/2008/07/06/highlighting_external_links_within_wordpress/images/external.gif) no-repeat right top;
  padding-right: 12px;
}
a.noexternallink[href^="http:"],
a[href^=http://blog-well.com]
{
  background: none;
  padding-right: 0px;
}

Note than ‘a.noexternallink[href^="http:"]‘ and ‘a[href^="/index.html"]‘ are separated by a comma. This is very important, since it ensures that the background of none and right padding of 0 pixels are applied to both ‘a.noexternallink[href^="http:"]‘ and ‘a[href^="/index.html"]‘. If you forget the comma, then it will only be applied, should ‘a[href^="/index.html"]‘ follow a ‘a.noexternallink[href^="http:"]‘.

Step 6: Exclude ‘external’ Image from Header and Footer Items

Within BlogWell’s theme we did not want any links within the header or footer to use the external image. Our theme uses the DIV HTML tag to identify the header and footer, and use the ID values of ‘header’ and ‘footer’ for each respectively.

<div id='header'>
...
</div>
...
<div id='footer'>
...
</div>

Without having to change all the links within the header and footer to use the ‘noexternallink’ class for links, we can easily prevent any links within the header and footer DIVs by using the following:

a[href^="http:"]
{
  background: url(/2008/07/06/highlighting_external_links_within_wordpress/images/external.gif) no-repeat right top;
  padding-right: 12px;
}
#header a[href^="http:"],
#footer a[href^="http:"],
a.noexternallink[href^="http:"],
a[href^=http://blog-well.com]
{
  background: none;
  padding-right: 0px;
}

Step 7: Exclude ‘external’ Image from Sidebar Items

If you didn’t want the external image to be applied to any links within any of the sidebars, you can do the following:

a[href^="http:"]
{
  background: url(/2008/07/06/highlighting_external_links_within_wordpress/images/external.gif) no-repeat right top;
  padding-right: 12px;
}
#header a[href^="http:"],
#footer a[href^="http:"],
#sidebar a[href^="http:"],
a.noexternallink[href^="http:"],
a[href^=http://blog-well.com]
{
  background: none;
  padding-right: 0px;
}

Step 8: Include Both Normal and Secure HTTP Links

If you use Secure HTTP, then your links will start with “https:”. To handle either standard HTTP (http://) or Secure HTTP (https://), then the above style sheet entries would be:

a[href^="http:"], a[href^="https:"]
{
  background: url(/2008/07/06/highlighting_external_links_within_wordpress/images/external.gif) no-repeat right top;
  padding-right: 12px;
}
#header a[href^="http:"], #header a[href^="https:"],
#footer a[href^="http:"], #footer a[href^="https:"],
#sidebar a[href^="http:"], #sidebar a[href^="https:"],
a.noexternallink[href^="http:"], a.noexternallink[href^="https:"]
a[href^="/index.html"], a[href^=https://blog-well.com]
{
  background: none;
  padding-right: 0px;
}

Step 9: Review Padding Styles for Existing Links in Your Theme

A word or caution, as now links within the blog or Web Site will have a right padding of 0 pixels. If your theme explicitly sets the right padding for some items, then you will need to mark these settings as important which will ensure that value is used instead of the new value of 0 which is set in the above style sheet entries.

For example, BlogWell’s menu in the header, uses links which have a right padding of 20 pixels. So after adding the above entries to our theme’s style sheet, our menu appeared as:

The style entry which sets the menu’s right padding is:

#topnav ul li a
{
  padding-right: 20px;
}

CSS allows style sheet attributes to be marked as important, which means they will not be overridden by other style sheet entries. We can use the “!important” tag to ensure that the right padding of 20 pixels is used rather than it be overridden by the 0 pixel padding of our external link entries.

#topnav ul li a
{
  padding-right: 20px !important;
}

Our menu is now restored to its correct state:

Step 10: Review

To highlight external links within your blog or Web site do the following:

1) Copy external.gif to the images sub-folder of your current WordPress’ theme folder.

2) Add the following lines to your style sheet:

a[href^="http:"], a[href^="https:"]
{
  background: url(/2008/07/06/highlighting_external_links_within_wordpress/images/external.gif) no-repeat right top;
  padding-right: 12px;
}
#header a[href^="http:"], #header a[href^="https:"],
#footer a[href^="http:"], #footer a[href^="https:"],
#sidebar a[href^="http:"], #sidebar a[href^="https:"],
a.noexternallink[href^="http:"], a.noexternallink[href^="https:"]
a[href^="/index.html"], a[href^=https://blog-well.com]
{
  background: none;
  padding-right: 0px;
}

3) Review your style sheet to see if any entries explicitly set the right padding value, in which case you may need to mark them with the “!important” tag.

A Final Word on Browsers

Should the link wrap around to a new line, Mozilla Firefox will display the external image correctly, following the end of the link on the new line.

 

However, Microsoft Internet Explorer will display the external image incorrectly at the end of the first line without any margin so it overlaps the text.

 

Sphere: Related Content

6 comments:

  1. hntrnyc, 25 July 2008 19:09

    thank you for your detailed tutorial but it doesn’t work on my theme. external image is either everywhere or nowhere. is there a way that i can just make sure my external links are underlined or in a different color? right now, the underline only shows when the cursor hovers above it.

     
  2. Mad, 26 July 2008 10:59

    @hntrnyc - Changing the color/underlining of external links is a little bit trickier, since these attributes are used throughout your theme. Using the background and padding-right attributes are not typically used so the likelihood of conflict is less.
    I would like to understand what you changed to get ‘everywhere’ and ‘nowhere’.

    I would expect after adding the following above “/*++++++ MAIN ++++++++*/” in your theme’s style.css file, it should work:

    a[href^="http:"], a[href^="https:"]
    {
    background: url(/2008/07/06/highlighting_external_links_within_wordpress/images/external.gif) no-repeat right top;
    padding-right: 12px;
    }
    #header a[href^="http:"], #header a[href^="https:"],
    #footer a[href^="http:"], #footer a[href^="https:"],
    #sidebar a[href^="http:"], #sidebar a[href^="https:"],
    a.noexternallink[href^="http:"], a.noexternallink[href^="https:"]
    a[href^="http://tekb8t.com"], a[href^=https://tekb8t.com]
    {
    background: none;
    padding-right: 0px;
    }

    And uploading external.gif to “wp-content/themes/dailypress/images”.

     
  3. hntrnyc, 26 July 2008 16:21

    hello mad and thank you for your response. the objects appeared everywhere after step three and nowhere after step 4 and on. this is a new theme i’m working with and i did not write the code so i believe it might just be a compatibility issue. i finally just changed the color of the hyperlinks to one that was already in my theme so it actually looks quite good. oddly enough this is the first time i have run across a WP theme that didn’t automatically highlight and underline hyperlinks. this one only showed under a hovering cursor.
    thank you again for this informative piece. i am new to wordpress and html for that matter, and i would be nowhere if it wasn’t for folks like yourself posting useful,quality content.
    cheers, hntrnyc

     
  4. paan, 28 July 2008 17:48

    thanks for the tip. I would definitely try this.
    Note on the issue with the padding right.
    Would this be solved by putting the new style on top of the css file. Since any other style that uses it will have precedence?

    I never tried it, but it’s the first thing that pops into my my mind instead of the !important attribute. I’ll report back if it works or not after i try it

     
  5.  

    [...] Highlighting External Links within WordPress | BlogWell (tags: wordpress) [...]

     
  6. Bookmarks about Divs (Pingback), 3 August 2008 15:46
     

    [...] - bookmarked by 1 members originally found by artefact on July 19, 2008 Highlighting External Links within WordPress http://blog-well.com/2008/07/06/highlighting-external-links-within-wordpress/ - bookmarked by 4 [...]

     

Write a comment: