How to Change Link Color in WordPress?
If you want to know how to change link color in WordPress, this article is for you.
I’ll take you through the process of changing link color in WordPress for 3 scenarios:
-
- Changing the default color of the links
- Changing the color of the links when you hover over it
- Changing the color of the visited links
Although you’d have to edit your webpage’s code a little, it won’t be anything dramatic. Just a short CSS code that you’d need to add to the “Additional CSS” section of your WordPress theme.
Haven’t even written or edited a single line of code before? Worry not! You don’t need any knowledge or experience in coding to change link color in WordPress.
Let’s get started.
How to Change Link Color in WordPress?
Before diving into the step-by-step process, it’s important to mention that the CSS property that enables you to change link color is “Color”.
So, all you’d have to do is put down “Color” in the additional CSS section of your WordPress theme and type in the value of the desired color.
Let’s jump right in.
- Log into the WordPress panel of your website/blog
After logging into your WordPress dashboard, click on “Customize” under the “Appearance” option.
Source: WordPress
You’ll now be redirected to the theme customization page where you can add the color property under the “Additional CSS” tab.
Source: WordPress
You’ll now see a text box where you can add CSS to make a variety of changes to your WordPress site’s appearance.
We are only concerned with changing link color in WordPress. So, type in the following text into the text box and click “Publish”.
Source: WordPress
The “0031ff” value is of a blue color. You can do your research. Find out the hex code of the color you like and place it in place of this one.
What you can do is, install a browser extension by the name “ColorZilla” and pick a color of your liking from a hex color wheel.
After installing the extension, you can just go to the Adobe color wheel page here, click the ColorZilla extension, and select a color of your choice.
Source: Adobe.com
The last step is to copy the color hex code and paste it as the color property value in “Additional CSS”.
Note that this will change the default color of links in WordPress. So, whenever you’d be linking any text, it’ll be of that color.
How to Change Link Hover Color in WordPress?
You know how to change the default link color in WordPress. What about when a visitor hovers over a link?
WordPress’s default hover-link color is black, which may not be the most appealing one for the user. Luckily, you can change this hover link color to any color you want.
The process is similar to what we followed when we changed the default link color. You just have to type in “hover” in front of “a” in the text block under the “Additional CSS” tab.
Let’s see it in action.
Go to “Customize” under “Appearance”.
Click on the “Additional CSS” tab and enter the following code block.
Source: WordPress
That’s it! Now, whenever someone hovers over a link on your WordPress site, they’ll see this link color.
Follow the same procedure we discussed above to choose a color and copy/paste its hex code.
Changing the Visited Link Color
You can also assign a different color to the links that someone has already visited. After all, they wouldn’t want to visit a single link twice.
It would be helpful when there are multiple links on your page.
What you can do is add a different code box into the “Additional CSS” section.
Instead of “a:hover”, you type in “a:visited”.
Note that you can assign a different color to all of the three links in WordPress at once. However, you’d have to use a different code block under the “Additional CSS” section for each one.
Changing Link Color Without Code
You don’t have to add a code box to change the color of a link in WordPress. There are many themes that allow you to do that with a click of a button.
You can just go to “Appearance” > “Customize” and look for the “Color” option.
However, not all WordPress themes provide that option. The method we’ve discussed above applies to every theme.
How Do I Change the Link Text Color in HTML?
Changing the color of a link in HTML is somewhat like changing it in WordPress. You’ll have to edit the Style.CSS file to achieve that.
Here are the default HTML link colors:
-
- A blue, underlined link is an unvisited link
- A purple and underlined link is visited link
- A red and underlined link is active
HTML and CSS work hand-in-hand to define the structure and design of a website. As the color of a link relates to the way an element on a website looks, CSS can help us out.
You can change the colors of links in an HTML file by using the “<style></style>” tags.
Just place the code inside these two opening and closing style tags.
Here is an example.
Source: w3schools.com
An unvisited link in this case would be green in color. The visited link would be pink, while the hover and active links would be red and yellow, respectively.
The “Style” tag is just a tag that defines the default coloring of different links. It goes between the <head> tag of the <HTML> body tag.
How do I Remove a Link Color in HTML?
Removing a link color in HTML/CSS is simple. Let’s say you want to remove the color of a visited link that is currently pink. You’ll just have to change the “Color: pink” to “color: black” in CSS.
The black text is the default text in WordPress. If you are using a different text color, you can change it back to that one.
Doesn’t matter if it’s the default link color, hover link color, or visited link color, you can change it to whatever color you want with ease.
Again, you can easily get the hex code of any color you want from the Adobe color wheel. To grab the hex code, you can use a color picker extension like ColorZilla.
Final Thoughts
If you have a WordPress theme that allows the user to change link colors directly, you won’t need to add any code to your website’s CSS.
However, many themes don’t offer that feature. So, to make your WordPress links a different color, you’d have to add a small code into the “Additional CSS” section under the “Customize” option.
In your WordPress dashboard, just go to “Appearance” > “Customize” > “Additional CSS” and then add the relevant code box.
By default, an unvisited link in WordPress is blue and underlined. A visited link is purple and underlined. And, an active link would be red and underlined.
If you don’t know the hex codes of the colors you want to use, you can use ColorZilla and Adobe color wheel to find them.
