When people click on a link on your website, they think they will still be on your site. But if the link is leading to another site, you should let them know in advance.
For this, you can use an external link icon. This icon is a small symbol that shows that the link is leading to another website. This does not confuse people and their experience remains good. The number of people who leave the site because of being suddenly directed to another site is also less.
You can add these small but useful things to your WordPress site in just a few minutes. In this guide, we will show you different ways:
- Using a simple plugin
- Using a little advanced custom code
Whether you are a beginner or an expert, you will find a way that is easy for you and matches your site design.
Want to stay ahead with AI-driven WordPress insights and stay updated with the latest trends? Subscribe for daily search insights at wpguidepro to improve your WordPress strategy!
Table of Contents
Why Add WordPress External Link Icons?
External link icon seems like a small design thing, but it has very important benefits which can make your website better.
User experience is better
When people click on a link and suddenly go to another website, they feel strange. But if they know beforehand from the icon that the link is going outside, then they do not get confused. This way a lot of trust is built and the user does not get frustrated.
Navigation is better
By looking at the icon, the user can decide himself whether to open the link in the new tab, read it later, or stay on the site. This makes their way of browsing even smoother.
Website looks more professional
When you apply external link icons properly, your site looks more neat and professional. This shows that you pay attention to every small thing, which makes your brand strong.
Can help in SEO
These icons do not directly affect SEO ranking, but definitely help indirectly. When a user likes a site, he stays on the site for a longer time, interacts with the content, and also comes back again. All these things are positive signals for Google.
Accessibility improves
If the external link icon is placed with the correct alt text or area label, then people using screen readers also understand which way the link is going. This makes it easier for visually impaired people to use the site.
How to Add External Link Icons in WordPress
There are many easy ways to add an external link icon to your WordPress site.
You should use the method that is easy for you.
Method 1: Installing a Plugin
Often, installing a plugin is the simplest option for people. Both free and paid plugins are available.
- External Links Plugin is a popular plugin.
- After installing it, go to the WordPress dashboard and click on Settings > External Links.
This plugin automatically detects the external links of your site and puts an icon on them. You do not have to do any coding.
You can also change some things in this plugin:
- How to show the icon
- Whether the link opens in a new tab or not
- Do not show icons on some websites
This plugin works well with most WordPress themes. And you do not need to be a computer expert for this.
WP External Links is also another plugin which is made for this work.
There are more icon styles available in this. You can decide in which post type to show the external link icon or not.
Method 2: CSS-Only Solution
If you are looking for a little CSS, then you can add an external link icon without installing a plugin.
This way you get more control and the website also runs fast.
Using CSS Code
You can add this code to your WordPress site theme.
How to do it:
- WordPress Dashboard > Appearance > Customize > Additional CSS
Then paste the code below:
a[href^="http"]:not([href*="yourdomain.com"]):after {
content: " ↗";
font-size: 0.8em;
color: #666;
margin-left: 2px;
}This code puts a small arrow icon after those links that go to another website. The icon will not appear on the links of your own site.
Use Stylish Icon
If you want to put another stylish icon in place of the normal arrow, then you can use Font Awesome icon.
This is its code:
a[href^="http"]:not([href*="yourdomain.com"]):after {
font-family: "Font Awesome 5 Free";
content: "\f35d";
font-weight: 900;
font-size: 0.7em;
margin-left: 3px;
color: #999;
}This icon looks professional and looks more stylish.
But remember: Font Awesome icon will only work if Font Awesome is already setup on your site.
Method 3: Custom JavaScript Solution
If you want more advanced control like not putting an icon on some special links or putting a different design — then JavaScript is the best option.
Where to put the code?
You can use this code in 2 ways:
In the functions.php file
by using a plugin like Code Snippets
document.addEventListener('DOMContentLoaded', function() {
var links = document.querySelectorAll('a[href^="http"]');
var currentDomain = window.location.hostname;
links.forEach(function(link) {
var linkDomain = new URL(link.href).hostname;
if (linkDomain !== currentDomain) {
link.innerHTML += ' <span class="external-link-icon">↗</span>';
}
});
});What does this code do:
- When the page is opened, the code starts.
- It checks all http links.
- Then it checks whether the link is from your site or some other site.
- If it is an external link, then a small arrow icon is placed next to it.
What is its benefit:
- You can add the CSS class of your choice
- You can easily change the design of the icon in CSS
- You can also exclude any specific link if you want
Learn More Tips and Tricks to Customize Your WordPress Site
Adding an external link icon is a small but useful thing that can improve the user experience of your WordPress site.
But that’s not all there are other useful customizations you can try:
Using Custom CSS
If you learn a little CSS, you can make your site design even more different and unique. You should learn these things:
- What are CSS selectors
- How is a responsive design made
- How to edit a theme safely so that nothing goes wrong
Learning WordPress Hooks and Filters Hooks
Filters are a powerful feature of WordPress. With their help, you can change the features of your site without touching the core files.
If you learn to use them, you can fully customize your site.
Keeping the speed of the site fast When you add new features or icons, the site can also become slow.
That’s why you should also learn:
- How to minify CSS
- How to optimize images
- How to make a site fast by using caching
Pay attention to accessibility
Your site should be able to be used by people of all types this is very important. That’s why you should also see to it that your customizations are easy for handicapped or visually impaired people
