{"id":131881,"date":"2014-10-05T08:00:00","date_gmt":"2014-10-05T12:00:00","guid":{"rendered":"http:\/\/premium.wpmudev.org\/blog\/?p=131881"},"modified":"2014-10-08T21:05:16","modified_gmt":"2014-10-09T01:05:16","slug":"style-external-links-wordpress-like-wikipedia","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/style-external-links-wordpress-like-wikipedia\/","title":{"rendered":"How to Style External Links in WordPress Like Wikipedia"},"content":{"rendered":"

Styling external links is common practice for many sites containing references, such as Wikipedia.<\/p>\n

For users, it’s a simple visual cue indicating that if you click a particular link you will\u00a0be\u00a0taken to another site.<\/p>\n

In today’s Weekend WordPress Project I’ll show you how to style all external links on your site.<\/p>\n

\"External<\/a>
Add icons to your external links.<\/figcaption><\/figure>\n

How Wikipedia Styles Links<\/h2>\n

In case you’ve forgotten how Wikipedia styles its links, here’s an example from the WordPress page:<\/p>\n

\"Wikipedia<\/a>
Wikipedia external links.<\/figcaption><\/figure>\n

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.<\/p>\n

Styling External Links With Text<\/h2>\n

Firstly, let’s look at how to style your link with simple text.<\/p>\n

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:<\/p>\n

{code type=php}
\na[href^=”http:\/\/”]:not([href*=”wpmu.dev”]):after,
\na[href^=”https:\/\/”]:not([href*=”wpmu.dev”]):after {
\ncontent: “(EXTERNAL LINK)”;
\npadding-left:5px;
\n}<\/p>\n

Your internal and external links will now look like this:<\/p>\n

\"External<\/a>
External link with text.<\/figcaption><\/figure>\n

Make sure you replace “wpmu.dev” with your website domain name.<\/p>\n

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.<\/p>\n

Styling External Links With an Icon<\/h2>\n

Now let’s add an icon to external links.<\/p>\n

Get yourself an appropriate icon. I like to use Flat Icon<\/a>. You’ll then need to upload your icon to\u00a0your theme’s “images” folder.<\/p>\n

Next, add the following code to your stylesheet.css file:<\/p>\n

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

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

The links on my test site now look like this:<\/p>\n

\"External<\/a>
External link with icon.<\/figcaption><\/figure>\n

You’ll notice that I’ve added padding to the icon so it doesn’t sit flush with the text.<\/p>\n

Thanks to the helpful members at Stack Exchange<\/a> for sharing their knowledge on how to style external links.<\/p>\n

Image credit: Dave Gandy<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

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\u00a0be\u00a0taken to another site. In today’s Weekend WordPress Project I’ll show you how to style all external links on your site.<\/p>\n","protected":false},"author":164650,"featured_media":132642,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[9798],"tutorials_categories":[],"class_list":["post-131881","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-weekend-wordpress-projects"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/131881","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/164650"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=131881"}],"version-history":[{"count":1,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/131881\/revisions"}],"predecessor-version":[{"id":215710,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/131881\/revisions\/215710"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/132642"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=131881"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=131881"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=131881"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=131881"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}