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.
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:
You’ll notice that I’ve added padding to the icon so it doesn’t sit flush with the text.
Thanks to the helpful members at Stack Exchange for sharing their knowledge on how to style external links.
Image credit: Dave Gandy.
