Search

How to Add Icon to External Links in WordPress (without Plugin)

Adding small icons can help users quickly identify external links, making it clear that clicking on the link will take them to a different website. This visual cue enhances the overall user experience by providing clarity and reducing concerns about potential security risks or spammy content.

When incorporating icons for external links, it’s better to opt for easily recognizable symbols that are not overly distracting, similar to the illustration above. You can obtain the SVG icon from reputable sources like Iconify or Font Awesome, websites that offer a variety of SVG icons.

SVG external-link icon on Iconify

This tutorial will guide you on adding a small icon to external links in WordPress without installing any plugins. The icon will automatically display itself on any link that has a different anchor from the host.

Add Icon to External Links in WordPress

In this tutorial, we’ll be adding custom code directly to the theme’s functions.php file. It’s advisable to take a backup of your website before proceeding, or consider a safer method for incorporating code snippets into WordPress.

Once you’re ready, begin by navigating to Appearance → Theme File Editor on your WordPress dashboard. Subsequently, paste the following code at the bottom of the functions.php file.

function wpp_external_link_icon() {

    wp_register_script('external-link-icon', false);
    wp_enqueue_script('external-link-icon');

    wp_add_inline_script('external-link-icon', "
		function externalLinkIcon() {
			var icon = '<svg xmlns=\"https://www.w3.org/2000/svg\" xmlns:xlink=\"https://www.w3.org/1999/xlink\" aria-hidden=\"true\" role=\"img\" width=\"0.8em\" height=\"0.8em\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 2 20 20\">' +
				'<path d=\"M9 3h8v8l-2-1V6.92l-5.6 5.59l-1.41-1.41L14.08 5H10zm3 12v-3l2-2v7H3V6h8L9 8H5v7h7z\" fill=\"currentColor\"/>' +
				'</svg>';
			// Check if content is available
			if (!document.querySelector('.entry-content')) return;
			var links = document.querySelector('.entry-content').querySelectorAll('a');
			[...links].forEach(function (link) {
				if (
					link.host !== window.location.host &&
					link.href.substr(0, 4) !== 'tel:' &&
					link.href.substr(0, 7) !== 'mailto:'
				) {
					link.innerHTML += ' ' + icon;
				}
			});
		}
		window.addEventListener('load', externalLinkIcon, false);
	");

}

add_action('wp_enqueue_scripts', 'wpp_external_link_icon');

If you’re working with a block theme, you can find the Theme File Editor menu located within the Tools menu. In the case that your chosen theme, like “Twenty Twenty Three,” doesn’t include the functions.php file, you might need to create it via SFTP or your site’s file manager initially.

What the code above does is automatically add a small icon to external links within your post or page content. The code includes a JavaScript function that appends an SVG icon to links leading to external sites, making them easily identifiable for users. The function is triggered when the page fully loads, and it checks each link within the ‘entry-content’ class to determine if it’s an external link. If so, it adds the specified icon to visually distinguish external links from internal ones.

Once the code is ready, click the Update File button to implement the changes, initiating the process of adding the external icon to all links with a distinct anchor from the hosting site.

The Bottom Line

Enhance user experience on your WordPress website by adding small icons to external links, signaling a clear departure to another site. This tutorial offers a plugin-free method, ensuring automatic icon display on links with a distinct anchor from the hosting site, fostering clarity and mitigating security concerns.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Hendri Risman

Hendri Risman

Hendri is a WordPress expert and a writer staff at WPPagebuilders. He writes solutions on how to get things fixed in WordPress a lot. Mostly without involving a plugin.
Want to save yearly expense up to $219? why not?

Leave a Comment