How To Change Link Color In WordPress

Are you new to WordPress and struggling to configure all the design elements exactly as you want them?

Have you been wondering how to change the link color in WordPress to match the aesthetic of your brand?

While WordPress is the perfect platform for creating a sophisticated website, you’re most likely to have moments of frustration during the design process.

We’ve all been there. As much as we love WordPress, taking control of the design can sometimes prove to be challenging.

Why Change Your WordPress Link Color?

WordPress theme authors generally dictate the color of the theme’s elements; all the way down to the links.

The standard blue hyperlink color doesn’t always suit your theme, or your brand aesthetic for that matter.

You may want to change the color of specific links so the reader can differentiate between links that have already been explored and links yet to be clicked. This can help your readers to navigate your website with ease.

The good news is, you can do all of these things to your hyperlinks, using some simple coding in your WordPress theme customizer.

Picking Specific Colors For Your WordPress Website

When it comes to picking link colors for your WordPress website, tools like “HTML color picker” can help you to find exactly what you’re looking for and speed up the design process.

Simply type, “HTML color picker” into Google, and you will get the below result:

Underneath the color slider, you’ll notice the ‘HEX’ code for the color. This is what we are going to use later, to define which exact color we want our links to be.

How To Change Link Color in WordPress

You need to first login to your WordPress dashboard, and head to:

Appearance > Customize > Additional CSS.

Here, we are going to enter a few lines of code to specify which links we’d like to change, and the colors we’d like to incorporate.

Altering The Default Link Color In WordPress

The default link color is how all links will automatically appear on your website.

If you’re happy to have just one link color, regardless of whether the visitor has clicked on it or not, this is the code to change the default link color:

a:link { color: #00000 }

Make sure you replace the existing hex code with your color’s custom hex code, otherwise you’ll end up with a plain black link!

Altering The Visited Link Color In WordPress

Once a visitor has clicked on one of your hyperlinks, it’s considered a visited link.

To help your website visitors keep track of where they’ve been already, improving the user experience, you can change the color of this link to help them, using this code:

a:visited { color: #00000 }

Altering The Hovered Link Color In WordPress

Do you want to change the color of a link when a reader is hovering over it? You can do this too!

This can help to boost the visibility of links that may appear to be hidden amongst other content.

a:hover { color: #00000 }

Test Drive Your New Link Colors Before Going Live

The best part about using the Additional CSS section in WordPress to manipulate your link colors is that it’s easy to delete any customizations that you’ve made.

It’s important to play around with the colors, and the coding, before publishing any changes.

Once you’re happy with your new link color, don’t forget to save and publish the changes.