You’ve spent countless hours perfecting the content on your WordPress site. Yet, despite the high-quality articles and visually appealing layout, something seems amiss. Could the missing element be a straightforward yet effective way to enhance your visitor’s navigational experience?

Enter the external link icon, a simple yet potent tool that revolutionizes how your audience interacts with your site.

By the end of this comprehensive guide, you’ll understand not only the benefits of adding these icons to your WordPress pages but also how to seamlessly integrate them into your website, step-by-step.

Why It’s More Than Just a Pretty Picture

Let’s first address the elephant in the room: What’s the big deal about external link icons? Well, in an age where the average user is inundated with links, differentiating between what keeps you on-site and what takes you away is invaluable. These small icons serve as road signs, helping your visitors navigate the often-confusing world of website content.

A Welcome Aid for User Navigation

Consider the last time you got lost clicking through a maze of internal and external links on a website. Frustrating, isn’t it? By providing a straightforward visual cue, like an external link icon, you can help users make informed decisions about where they wish to venture, eliminating the annoyance of unexpected website exits.

Boosting On-Site Engagement

Your website is your kingdom, and like any good host, you want to keep your guests entertained as long as possible. When users know that clicking a link won’t take them away from your domain, they are more likely to interact with your content and less likely to hurriedly exit, thereby increasing session durations and potentially, conversion rates.

Building Credibility and Trust

Your audience values transparency. The consistent use of external link icons adds an extra layer of openness and professionalism to your site. Your visitors know you have nothing to hide, which encourages repeat visits and fosters a trusted community around your content.

There are two plugins that can help with this:

WP External Link

Linkilo (coming soon – End of September 2023

To simplify the process of adding external link icons, the WP External Links plugin or Linkilo is highly recommended. This popular tool not only offers easy icon addition but also gives you a host of other benefits like nofollow attributes and new tab opening settings.

Step 1: Install and Activate the Plugin

The first order of business is to find the WP External Links plugin in the WordPress plugin section or purchase Linkilo and activate it.

Step 2: the Features

Upon activation, navigate to the plugin settings in your WordPress dashboard. It’s wise to spend a few moments here to explore the gamut of features available. It’s more than just icons; you can configure how the external links behave, which can contribute positively to the user experience.

WP External Link settings
Linkilo>>Settings>>External

Step 3: Customize Your Icons

Scroll down to the settings section that allows you to customize the icon’s appearance. Make sure it aligns with your overall site aesthetics.

Step 4: Finalizing Icon Positioning

In the world of website design, small details can make a big difference. Therefore, decide wisely if you want your external link icon to the right or the left of your link. While most websites place it to the right, following suit ensures a more unified user experience across the web.

Step 5: Save and Deploy

After you’re satisfied with your choices, hit the ‘Save changes’ button. Your site will now automatically feature the external link icon, providing an added layer of navigation aid to your audience.

Why Manual Over Plugins?

While plugins are convenient, there’s a distinct advantage in opting for manual methods: Complete control. You can control the size, shape, color, and hover effects to fit perfectly with your site’s aesthetics. Plus, fewer plugins mean quicker load times. Now, let’s get our hands dirty and start crafting.

Prerequisites

Before diving in, ensure you have:

  • Basic knowledge of HTML, CSS, and JavaScript.
  • Access to your WordPress theme files via an FTP client or cPanel.
  • A code editor for modifying files—anything from Notepad to more specialized software like Visual Studio Code.

Step 1: Icon Selection

Select an icon that suits your site’s look. Many designers use SVG or PNG formats for clarity. You can either design your own in software like Adobe Illustrator or download one from free sites such as FontAwesome. Remember, the icon should be easily understandable yet not intrusive.

Step 2: Upload Icon to Your WordPress Site

  1. Open your FTP client and log in.
  2. Navigate to wp-content/themes/your-theme-name/images/.
  3. Upload your chosen icon here.

Step 3: Open functions.php

Navigate to wp-content/themes/your-theme-name/ and locate the functions.php file. This is where you’ll add a function to automatically append the icon to external links.

Step 4: Write The PHP Function

Open functions.php and at the end of the file, add the following code snippet:

function add_external_link_icons($content) {
    $content = preg_replace_callback('/<a[^>]+/', function ($matches) {
        $link = $matches[0];
        if (strpos($link, 'rel="external"') !== false || strpos($link, "your-site-domain.com") === false) {
            return str_replace('<a', '<a class="external-link"', $link);
        } else {
            return $link;
        }
    }, $content);
    return $content;
}
add_filter('the_content', 'add_external_link_icons');

This function scans your content for external links and adds a CSS class called external-link.

Step 5: Add CSS Styles

Open your theme’s style.css and add:

.external-link::after {
    content: url('your-site-domain.com/wp-content/themes/your-theme-name/images/your-icon-name.svg');
    margin-left: 5px;
    vertical-align: middle;
}

Replace 'your-site-domain.com' and 'your-icon-name.svg' accordingly. This CSS snippet adds your icon after the link.

Step 6: Thorough Testing

Before making your changes live, test on different browsers and devices. Make sure the icon size is responsive and that it doesn’t mess up the text flow.

Step 7: Deploy the Changes

If everything looks good, it’s time to push the changes live. Save all edited files and clear your WordPress cache.

Conclusion: A Small Change for a Big Impact

Incorporating external link icons might appear trivial, but its effects are far-reaching. From enhancing the user experience to building credibility, the impact is palpable. The WP External Links plugin provides an uncomplicated pathway to achieving this feature, tailored just to your liking. By making this straightforward change, you’re not just adding a tiny icon next to a link; you’re setting a new standard of transparency and user-friendliness on your website.