How to Style External Links in WordPress Like Wikipedia

Styling external links is common practice for many sites containing references, such as Wikipedia.

For users, it’s a simple visual cue indicating that if you click a particular link you will be taken to another site.

In today’s Weekend WordPress Project I’ll show you how to style all external links on your site.

Add icons to your external links.

How Wikipedia Styles Links

In case you’ve forgotten how Wikipedia styles its links, here’s an example from the WordPress page:

You’ll notice that a small icon sits next to each of the links mentioned in the References section of the WordPress page, indicating that the links, when clicked, will take you to a third-party website.

Styling External Links With Text

Firstly, let’s look at how to style your link with simple text.

If you’re not already using a child theme, set one up now and then add the following code to your theme’s stylesheet.css file:

{code type=php}
a[href^=”http://”]:not([href*=”wpmu.dev”]):after,
a[href^=”https://”]:not([href*=”wpmu.dev”]):after {
content: “(EXTERNAL LINK)”;
padding-left:5px;
}

Your internal and external links will now look like this:

Make sure you replace “wpmu.dev” with your website domain name.

This code looks at each of the links on your site and compares them to your domain. If a link doesn’t match your domain, the text (EXTERNAL LINK) is added to the end of a link.

Styling External Links With an Icon

Now let’s add an icon to external links.

Get yourself an appropriate icon. I like to use Flat Icon. You’ll then need to upload your icon to your theme’s “images” folder.

Next, add the following code to your stylesheet.css file:

{code type=php}
a[href^=”http://”]:not([href*=”wpmu.dev”]):after,
a[href^=”https://”]:not([href*=”wpmu.dev”]):after {
content: “” url(‘/wp-content/themes/twentyfourteen/images/external-icon.png’);
padding-left:5px;
}

Make sure you change “wpmu.dev” to your own domain name, and also update the URL to reflect the file name for your icon.

The links on my test site now look like this: