Table of Contents
There are 2 main ways of changing the link colors. The first and the most practical is writing a custom CSS. The main advantage is that it works anywhere. With all your themes and all plugins installed.
The less practical way is finding the proper place in your WordPress theme or plugin setting. And they may not support the change of WordPress link color at all.
In this guide, we will go with the CSS method.
The first one is when the link is not clicked and has not been visited before by the user. The visited state is when the link was already clicked by the user. The hover state is when a user hovers his mouse over the link. And the active state is when the link is clicked.
Typically, you are changing WordPress link colors to fit your wished color scheme. To achieve it the best, you'll need to deal with all 4 states mentioned above.
The colors can be:
To learn more about colors in CSS, you can check W3Schools colors.
Don't be confused. Mostly you'll be using the HEX color notation. And if you need opacity, then the RGBA.
Now that we know all the basics let's move on to the practical part - how to change WordPress link colors with CSS.
Even though we are talking about the CSS method, it doesn't mean that you have to edit your theme's style.css file. You can use the Additional CSS option in your WordPress Customizer.
To do so navigate to Appearance -> Customize -> Additional CSS.
As you can see, I've already inserted CSS, which makes all the links across my website red.
The customizer is one of the greatest WordPress inventions. You can change almost everything about your WordPress website. Without touching a line of code. And the CSS will persist even after changing your WordPress theme.
Globally means that the change will apply to all links on your WordPress website. It's useful when you want to change the link color scheme of your whole website at once. It might be a bit weird to have all the links with the same color across your WordPress site.
Below is the CSS, that you can simply put into the Customizer box.
/** DEFAULT STATE **/
a {
color: #ff0000 !important; /** RED **/
}
/** HOVER STATE **/
a:hover {
color: #0000ff !important; /** BLUE **/
}
/** VISITED STATE **/
a:visited {
color: #00ff00 !important; /** GREEN */
}
/** ACTIVE (CLICKED) STATE **/
a:active {
color: #ffc0cb !important; /** PINK **/
}
The global method is mainly used for changing all the WordPress link colors. Changing the color of the WordPress navigation menu is quite easy too. The CSS is similar to the above. We just need to add a targeting element. For our purposes, it's ul.nav.
As you can see, only the navigation menu links are changed. Below you can find the CSS for it.
/** DEFAULT STATE **/
ul.nav a {
color: #ff0000 !important; /** RED **/
}
/** HOVER STATE **/
ul.nav a:hover {
color: #0000ff !important; /** BLUE **/
}
/** VISITED STATE **/
ul.nav a:visited {
color: #00ff00 !important; /** GREEN */
}
/** ACTIVE (CLICKED) STATE **/
ul.nav a:active {
color: #ffc0cb !important; /** PINK **/
}
This CSS is for all navigation menus. Sometimes you might need to fine-tune it and change the color of one particular menu. In this case, you'll need to add an ID to the menu.
For example:
/** DEFAULT STATE **/
#top-menu a {
color: #ff0000 !important; /** RED **/
}
And you can find the ID through Chrome Developer Tools.
It's similar to changing the navigation link color but a little bit more tricky. WordPress has a class ".entry-title", that should be added to every WordPress post title. But a lot of themes/page builders do not support it. In this case, you'll need to open the Chrome Developer Tools and find the proper CSS selector on your own.
/** DEFAULT STATE **/
.entry-title a {
color: #ff0000 !important; /** RED **/
}
/** HOVER STATE **/
.entry-title a:hover {
color: #0000ff !important; /** BLUE **/
}
/** VISITED STATE **/
.entry-title a:visited {
color: #00ff00 !important; /** GREEN */
}
/** ACTIVE (CLICKED) STATE **/
.entry-title a:active {
color: #ffc0cb !important; /** PINK **/
}
And you can see it on my website, which is powered by my Ark WordPress theme. There is not the "entry-title" class, but rather "blog-grid-title-lg".
Here is the situation easier. WordPress has a class called "entry-content" and "post-content". They should be added to all WordPress post content elements. I'm saying should, but sometimes the classes are not present. In that case, to change your WordPress post content link colors, you'll need to use Chrome Developer Tools. And notice below that I'll be chaining the CSS classes. Basically using the "entry-content" and "post-content" classes.
/** DEFAULT STATE **/
.entry-content a, .post-content a {
color: #ff0000 !important; /** RED **/
}
/** HOVER STATE **/
.entry-content a:hover, .post-content a:hover {
color: #0000ff !important; /** BLUE **/
}
/** VISITED STATE **/
.entry-content a:visited, .post-content a:visited {
color: #00ff00 !important; /** GREEN */
}
/** ACTIVE (CLICKED) STATE **/
.entry-content a:active, .post-content a:active {
color: #ffc0cb !important; /** PINK **/
}
Luckily, the WordPress Read More button is generated directly by WordPress core. With most themes, you should be ok with using the CSS selector ".more-link". If this way of changing the WordPress read more button link color does not work - use Chrome Developer Tools. And find the class on your own.
/** DEFAULT STATE **/
.more-link a {
color: #ff0000 !important; /** RED **/
}
/** HOVER STATE **/
.more-link a:hover {
color: #0000ff !important; /** BLUE **/
}
/** VISITED STATE **/
.more-link a:visited {
color: #00ff00 !important; /** GREEN */
}
/** ACTIVE (CLICKED) STATE **/
.more-link a:active {
color: #ffc0cb !important; /** PINK **/
}
By post meta, I mean author, date of post, and category. Sadly, these things are not handled directly by WordPress core. It means that if you want to change your author link color, date link color, or category link color - you'll need to select your classes in the Chrome Developer Tools.
WordPress sidebars should be wrapped with the "widget-area" class. Again, you cannot rely on this in all WordPress themes. On the other hand, WordPress widgets are wrapped by the "widget" class. For changing the WordPress sidebar and widget link colors, it's safer to use the class ".widget". The final output will look like this:
/** DEFAULT STATE **/
.widget-area a, .widget a {
color: #ff0000 !important; /** RED **/
}
/** HOVER STATE **/
.widget-area a:hover, .widget a:hover {
color: #0000ff !important; /** BLUE **/
}
/** VISITED STATE **/
.widget-area a:visited, .widget a:visited {
color: #00ff00 !important; /** GREEN */
}
/** ACTIVE (CLICKED) STATE **/
.widget-area a:active, .widget a:active {
color: #ffc0cb !important; /** PINK **/
}
There is quite a lot of CSS. I've put it in an external file, and you can download it. It's ready to be inserted in the CSS code area in the WordPress customizer. The whole CSS file for changing WordPress link colors can be found here.
Hi! My name is Tom Herudek and I help my clients with their WooCommerce stores.
Learn more