If you are reading this text you are likely to have stumbled upon a problem when trying to change link color in WordPress.
Rest assured, the solution is easy and outlined below in a step-by-step format.
I will however start by explaining exactly what we are doing as it will help build your level of understanding.
Easy when you know where to click
WordPress is a great Content Management System as it helps us to complete easy as well as complicated tasks with ease. This is great as it allows us to focus on content creation.
But as the heading suggests we need to know where to click to get the job done.
In this article we will show you how to change the link color in WordPress using CSS formatting as well as via your chosen templates customize menu.
A brief introduction to the magic of CSS
CSS or Cascading Style Sheets is a language that we use to help us style text and HTML elements.
It may sound complicated but it is really quite easy and best explained with an example.
a {
color: red;
}
The Selector (a) simply defines the HTML element that we are going to style.
The Properties (color: red) describe how we want to style the HTML element we have listed as the Selector.
In our example above we have specified that we want to style the HTML element “a” which stands for “anchor”. And in HTML and CSS speak “anchor” is a fancy name for a link.
The Properties are self-explanatory. We specify that we want to style the “color” property by giving it the property or color “red”.
So there you have it. Now we just need to make the color of the link change in WordPress and on our Website.
Changing the link color using CSS
Armed with our knowledge of CSS we jump right in and decide to change the link color per below
- Links (blue)
- Visited links (green)
- Hover over link (red)
Getting the CSS ready for WordPress
In our brief introduction to CSS we have already covered what we need to do to change the link color to blue.
The code we need reads as follows:
a {
color: blue;
}Making visited links a different color
The code above will change the color of all links on our WordPress website to blue.
But to make our website more user friendly we want to use a different color for links to pages that the visitor has already visited.
To accomplish this feat is easy and we use something that is called a “pseudo-class”.
a:visited {
color: green;
}A pseudo-class is to put it simply a description of the state of a HTML element.
Confusing?
You know this. Again, do not let the language throw you off.
Let’s break it down.
“The state of a HTML element”.
The HTML element refers to the Selector which in our case was “a” which stands for “anchor” or link in normal speak.
And “the state” simply refers to what can happen to the link. Visited is an example of a state. Hover is another state that we will move on to next.
Maybe at this point you are starting to realize that we often need to learn abstract and complicated terms to accomplish simple things. Lesson to be learned: do not let the language throw you off.
Making links change color when we hover over them
We have already managed to specify color for links in general. We have also created an exception for the state visited links by using the pseudo-class visited.
Now we move on to specify color for the state :hover. With the pseudo-class :hover the color of the link will change when the mouse pointer moves over the link.
This is a good time to try to figure this out by yourself before you move on. You have all the information you need. Or just read on. After all, who needs another test?
a:hover {
color: red;
}There you have it. Time to round up the code and get it ready for WordPress.
The full code we need to manage the color of our links is:
a {
color: blue;
}
a:visited {
color: green;
}
a:hover {
color: red;
}Uploading CSS to WordPress for link color changes to take effect
To upload we start by logging into the WordPress admin area or Dashboard.
When we are logged in we click “Appearance > Customize”
Next we choose “Additional CSS” at the bottom of the menu.
We then paste in our CSS code from earlier in the text area. Do be careful not to overwrite or remove any other code. When we have pasted the code we click “Publish”.
To verify our changes we open a new tab in our browser and go to our website. We should now see the new color changes we have implemented for the links (or the anchor HTML element if you please).
Did you not see any changes whatsoever? No problem, we will troubleshoot later on in this articles.
The no-code version to changing color of links in WordPress
There is of course also a no-code way to change the link color in WordPress.
I prefer the CSS version as it teaches us something about how WordPress works – but of course, you should choose the way you prefer.
Now, the way to change the link color without writing code will vary slightly depending on the theme you have chosen.
But having worked with quite a few Themes I would say that it is fairly straightforward regardless of Theme.
This example is Based on the theme “Marketer” from GeneratePress.
Again we start by choosing “Appearance > Customize
We then choose “Colors” followed by “Content”.
Then we simply change the color values for the Link attributes and click “Publish”.
Troubleshooting – Caches, CDNs and why !important is important
If we do not see any change in link colors there are three quick fixes that will cure the problem. We will do them one by one as they may not all be necessary.
Delete cache
Even iof we have saved our new CSS code it could be that the old code is still sitting around in the cache. To get rid of the cache we simply choose “Purge all” in the Caching menu in the top bar.
After it is done, we test again. If there is still a problem we move on to step 2.
Delete CDN cache
Today most hosting companies hook us up to Content Delivery Networks (CDN). The CDNs keep cached copies of our site for a specified period of time. Often hoisting companies use 6 hours. If you are hit by the CDN cache you need to login to your hosting company and delete the CDN cache.
It may sound complicated but it is quite simple. In Bluehost you simply log into the Control Panel and choose Performance. Under the heading Cloudflare CDN Caching Control we find the following option.
After it is done, test again. If there is still a problem move on to step 3.
Why !important is important
When we added code to the CSS style sheet we had to be careful not to delete the code that was already there.
Now, sometimes the code we enter clashes with existing code that already styles the links on our website. And if this code has a higher priority our code will never be read.
But if we add “!important” to our code it will automatically override all previous styling for the HTML element “a”.
To update our CSS code we simply follow the same path as before starting from the Dashboard. “Appearance > Customize” and then “Additional CSS”.
Some may argue to do this last step first. But we do not want duplicate code as it makes our website slow. If we have to use !important we should instead locate the existing CSS and update it.
Adding more code that does the same thing is not a great solution.
Choosing colors for links
In all our examples we have used words to define the color of our choice. Colors have been defined as “blue”, “green” and “red”.
This works quite well but is far more limiting than using what is referred to as the Hexadecimal (Hex) or RGB (Red-Green-Blue).
Unless you are a designer you will find that Hex and RGB accomplish the same thing. Both Hex and RGB gives us more versions of every color by introducing blends of colors.
Hex uses a combination of 6 letters and characters.
RGB uses three pairs of numbers in the range of 0-255.
Three examples where the word “Blue” would return the same color whereas using HEX or RGB operns up more color options.
So there you have it. You now know how to change the link color in WordPress. You have also grasped the principles of CSS and understand three different ways to define color.
