Many times there are links to internal and external sources within content. For a reader it’s not always clear if they’ll be taken to a different site or stay on the current site. Hovering over a link to check the left bottom corner matches the domain is simply a inconvenience. You and I can both agree that this isn’t giving the reader the best experience.

The best solution is to add a small icon. This makes it clear that a link is going to be directing the reader to a external site. Adding a icon manually every time is tedious and without a doubt will be forgotten or inconsistent throughout the site.

It is quick and easy to do this automatically, and will never be forgotten or inconsistent. It only requires a small code snippet and does not add any notable loading times to the page.

The code snippet below automatically adds the external-link icon to all anchors that are different from the host. The icon is added as a SVG at the top of the code snippet (taken from Dashicons), this can be replaced by any other SVG or image if desired.

The result is in this very blog post, the previous Dashicons link has the icon added through this code snippet.

The result with internal and external links

Jeroen Sormani

I'm a professional WordPress plugin developer on a mission to create the best plugins for my clients. I'm specialised in developing general WordPress, WooCommerce and Easy Digital Downloads plugins.

Interested in talking about a WordPress project? Get in touch!

Follow me on Twitter

Leave a Reply