Home

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.

External icon feature image
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:

Wikipedia external links
Wikipedia external links.

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:

1
2
3
4
5
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:

External link with text.
External link with text.

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:

1
2
3
4
5
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:

External link with icon.
External link with icon.

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.

Publicités

Laisser un commentaire

Choisissez une méthode de connexion pour poster votre commentaire:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s