How to Change the Color of Links in WordPress?

People usually pay too much attention to optimize renowned things and skip some small ones on a website. A little thing as the color of your links on your site may affect your website visitor experience and their engagement as well. We sometimes need to mind it a little bit. Especially, when you use a theme which provides neither suitable color for links nor feature to change it, the technique in this post will be useful for you.

Before Getting Started

I must notice that if you are using a theme, you should dive into your theme’s documentation to find out how to change the color of links and follow it. Otherwise, if there is no guide for it, you can follow my instructions then.

The reason is that this feature may be built-in in some WordPress themes.

Eg. our Memory theme has this. The color of links will follow the main color of the theme, so you can choose the main color to get the wanted display. Besides that, Memory also allows you to change the color of links in the menu. We go to the Appearance menu > Customize > Colors > Header Menu, then just need to click some buttons.

So, please make sure whether your theme provides a feature to change the color of links or not before doing any actions.

Change the Color of Links in WordPress using CSS

The best way to change the color is by using CSS. Don’t worry if you are not familiar with CSS. Just follow this instruction then you can do it easily.

Step 1: Find the Place to Add CSS Code

Normally, the coder will add CSS to the style.css file in the theme folder. It means that you must know to code a little bit.

However, if you built your website from scratch by coding, you definitely know how to change code to make the links display as you want. Otherwise, you may try this.

In the admin dashboard, go to Appearance > Customize > Additional CSS. You will see a box to add CSS code there.

Step 2: Add CSS Code to the Box

First, we should learn about the CSS for changing the color of links. I will interpret the code here:

• Change the color of the link in the first display:

a:link{
text-decoration: none;
color: #000000;
}

• Change the color when the visitor hovers the mouse on the link:

a:hover{
text-decoration: underline;
color: #000000;
}

• Change the color of the link which the visitor visited:

a:visited{
text-decoration: none;
color: #000000;
}

In there:

• text-decoration: none: does not underline the text.
• text-decoration: underline: do underline the text. You can change the text-decoration from none to underline, and vice versa.
• #000000: is the code of the color you want. You can choose a color, then pick its code here.

So now, you can make your own code such as:

a:link{
text-decoration: none;
color: #FB2B09;
}
a:hover{
text-decoration: underline;
color: #A609FB;
}
a:visited{
text-decoration: none;
color: #0912FB;
}

Copy this code to the box as we found in step 1 then check the result.

Final Words

When I added the CSS code, not only the links but also the social buttons changed the colors. To change the buttons' color back, we need to use CSS once again.

As you see, if your theme does not support changing color, you should learn about CSS a little bit to do it. Apart from this, CSS can help you to change the display of every element of the website. After you add the CSS code, remember to check other elements to avoid any error.