How to Change Link Color in WordPress

Changing hyperlink/link text colors in WordPress can be achieved via two methods. The first is a global level CSS setting that gives more functionality for tweaking specific link states, such as hover, and clicked/visited. The second provides the ability to override existing global settings, but will only be limited to tweaking link text color — on a case by case basis.

If that sounded confusing, think of them like this:

A) Method 1 will allow you to change the link colors in WordPress everywhere. That is, it’ll end up being the same color on all of your blog posts, pages, categories, etc. This is achieved via CSS.

B) The other method, can work on a case by case basis either on a post or a page specific level, where you can literally have 10 different colors for 10 different hyperlinks on the same post or page if you so desired. This is accomplished by leveraging WordPress’ default Gutenberg block editor.

Method 1: Changing WordPress Link Colors on a Global Level, by Using CSS

In WordPress, when you choose a theme, certain visual aspects are already dictated when making them. As you may have guessed, hyperlink/link colors are one of them. For the most part, this is also done on a global level/a.k.a, it would be the same everywhere throughout your WP site.

To make modifications to this default setting, you can leverage the additional CSS property feature.

How to Get to the Additional CSS Setting

From your WP Dashboard, head over to Appearance > Customize.

Then, find “Additional CSS” from the list, and select it.

What to Do in Additional CSS

As soon as you choose that option, WP will open a text editor, for you to be able to write your own CSS.

On a basic level, it’s super easy to code the CSS for links. Still, if you need a reference, I’d guide you to w3schools. Although, I have a screenshot (below) that illustrates how you can make the color changes, if you’d rather stick around.

As we can see, this image demonstrates how you can style links based on what their state is. That is:

• a:link: A regular hyperlink, unclicked/unvisited.
• a:visited: A clicked link.
• a:hover: A link when you hover your mouse over it.
• a:active: A link that is active/selected. In other words, in this case, the link’s color when you click on it, or click and hold.

And in case you were wondering, these code changes would need to go in the Additional CSS text editor. After you’re satisfied, be sure to publish.

One thing to keep in mind though, is that there is a hierarchy rule/order for the link states. They are, as shown in the image:

1. a:link
2. a:visited
3. a:hover
4. a:active

An easy way to remember this rule is by the words LOVE HATE (bolded letters).

Something else you should know, just as an FYI, that there are several ways to write the CSS for colors. What we’ve learned thus far, uses color names, such as blue, red, green, etc. But, you can also pen these down either in the form of a hex code, or RGB format. The syntax changes a little bit, but conceptually, it achieves the same end goal. In this day and age, I’ve mostly seen the usage of 6 character hex, so as an example, check out the code underneath.

/* unvisited link - grey color*/
a:link {
  color: #808080;
}

/* visited link - red color */
a:visited {
  color: #FF0000;
}

/* mouse over link - maroon color */
a:hover {
  color: #800000;
}

/* selected link - salmon color */
a:active {
  color: #FA8072;
}

What to Do if Your Changes Do Not Work

As a Hail Mary, you can take one additional step to see if your changes take effect.

You can use the !important property in CSS. Essentially, attaching !important to a rule can allow you to override other default settings/CSS that may be given priority over your code. With an !important tag, the browsers understand that hey, I need to ignore all the previously applied rules, and only use the one here.

To give you an idea of how it looks like, here’s an example — with !important added to the a:link state.

/* unvisited link - grey color*/
a:link {
  color: #808080 !important;
}

Note that in some cases, despite using the !important property, your changes may not take effect. In CSS, there is a concept called “specificity,” which is very complex and beyond my scope of understanding at the moment, but high level, it is the governing fundamentals on which CSS code gets priority, and when.

Having said that, I am pretty sure that for our purposes, this should yield the desired results. Otherwise, you’d really have to dig into the proper theme code to make link color changes.

Method 2: Changing Link Text Colors in WordPress, by Using Gutenberg Block Editor

There are tons of block editors out there, but I’ve always preferred to install fewer things on my WordPress site. And outside of that, I’ve found that Gutenberg serves all my needs.

What to Do in Gutenberg

When you’re composing/editing/writing content in a post or a page, and when you select a text for hyperlinking, right there, and then, you can get an option to change text color.

Technically, you’re merely changing the text color, and this has nothing to do with the fact whether it’s also hyperlinked or not. View the 16 seconds video below to understand how you can change text color within the block editor itself.

Conclusion

As learned, chiefly, there are two methods for changing link colors in WordPress. The first takes care of throughout everything you do in WP, while the second, can come in handy for individual tweaks.

Whatever your situation may be, I hope this post helps!