Change The Color Of External Links (WordPress)

If you’re running a website, chances are you’re looking for ways to increase your conversion rate – that is, the percentage of visitors who take the desired action, such as clicking on a link or making a purchase.

One common practice is to change the color of external links so that they stand out from the rest of the text. This can be especially effective if your site is mostly text-based. WordPress sites, for example, often have external links that are automatically colored blue.

wirecutter external links example

By changing the color of your external links, you can make them more distinctive and more likely to be clicked. You can also add other styling elements, such as underlining or bolding, to further draw attention to your links.

While there’s no guarantee that this approach will work for every website, it’s definitely worth trying if you’re looking for ways to increase your conversion rate.

CSS Styling For Changing External Links

Rather than just handing you the solution, I want to show you the flow of how this works so you can understand it better. Understanding it will help you to remember it and use it again in the future.

First, you want to target the “a” tag, which will target every single link on your site. Then, we add a condition to target our domain name.

a:[href*=peterkrysik"]

By putting an asterisk (*) before the equals sign (=), we are specifying that this applies to every link that contains our domain name. This is how we can target internal links only. Since we’re trying to target external links, we’ll need to add a switch. We’ll just add “:not()” to this condition, which just applies the opposite effect (from internal links to not-internal links).

a:not([href*="peterkrysik"]){
	color: red;
}

And just like that, all our external links are red. When you’re adding your domain name, you can use all the variations:

  • https://peterkrysik.com
  • www.peterkrysik.com
  • peterkrysik.com
  • https://www.peterkrysik.com
  • peterkrysik

The cleanest method is to simply use the domain name without the protocol (https), subdomain (www), or extension (.com). Just the name itself is enough to be caught in the condition.

External source:

Leave your thoughts below. Follow on Twitter