Do you want to learn how to change link color in WordPress easily?
We all know links play an important role in modern websites.
They help navigate your website’s content and between different websites.
GREAT link structure = GREAT user experience!
The internal links will properly connect single pages into one big database and direct users to the most relevant pages.
They are essential if you build a vast knowledge base full of tutorials and courses.
That’s why links must catch the eye of your visitors instantly!
(You can also use a link color that goes with your branding.)
This post covers:
- When & why change the link color in WordPress?
- 4 simple methods to change the link color in WordPress
- FAQs about changing link colors in WordPress
When & Why Change The Link Color In WordPress?
Did you ever visit a website and could barely notice the links in a big block of text?
If you don’t see it, you won’t click it.
(And that’s NOT a great practice.)
Link visibility plays an important role in web design.
In the example below, the link is grey in color and barely visible to your visitors.
Many will not even recognize it’s a link, and a potential extra page visit to your tutorial will be lost.
And if your visitor does not find the knowledge he/she seeks on your website, they will leave and search for it elsewhere.
Thumbs DOWN for SEO.
4 Simple Methods To Change Link Color In WordPress
So, let’s check how to make your hyperlinks (not blue) stand out from the rest of the text.
Sometimes it can be difficult to find the perfect color to maximize your conversions.
That will involve SOME experimenting, but for now, let’s look at how to change the color of the link.
My advice: Use the traditional “blue link” if unsure about the link color.
1. Change Link Color Using The CSS Code
You can enter a custom CSS code in the theme’s administration panel or the WordPress customizer tool.
This option is the most FLEXIBLE as you can pick any color in the palette, but it also involves some coding knowledge.
Colors in web design are defined with a hex code.
How do you find the hex code for your color?
You can find a color code you need with a tool such as color-hex.
The website lists the most popular colors and a color picker that allows you to select any color in the RGB model.
What if you saw a perfect color somewhere on the internet or on an image you have? Can you get the color code from anywhere on your computer?
YES!
You can find it with GetColor. (Simple software that does the trick.)
Install GetColor on your computer and drag the color picker tool to the image.
Voila, here is your color code.
Copy the code, head to Appearance > Customize and click the Additional CSS button.
Paste the following CSS code to the appropriate field and click the Publish button.
a {color:#5195C2;}
Refresh your website and check out the beautiful NEW color of your links!
2. Change Link Color Using WordPress Theme Customizer
Most modern WordPress themes can change the WordPress typography settings in the WP customizer. This is the easiest way to edit the link’s color.
Once again, go to Appearance > Customize.
But instead of clicking on the Additional CSS button, look for your WordPress theme’s typography options.
Please note: Every theme is different and your settings might not be the same as on the example below.
(Don’t worry, you’ll find it easily. And you can also check the theme’s documentation for help.)
In our case, click on the Colors & Typography Settings button. This will lead you to the link color options.
Click on the Select color button. You can set the color with either a color picker or the code.
Save the settings and you’re done.
Don’t forget to check your website to see if everything works properly.
3. Change link color using page builder
One of the easiest and quickest ways of changing a link color is using WordPress’ Block Editor/Gutenberg:
- You first need to highlight the text and add a URL to it.
- This will open a small popup with one of the elements being a down-pointing arrow.
- Click it.
- Then choose the Text color option and pick any from the ready-made colors or use a custom one.
- That’s it. (You can repeat the process for every link.)
Note: You can use a WordPress page builder‘s functions to change an individual link’s color and skip step four.
4. Change The Individual Link’s Color
All of the solutions above ONLY change the color of all the links on your website.
But what if you want to change the color of the links in the menu?
Or only the links in the sidebar widgets?
The option to change the color of the menu links might be available in the theme’s options.
But it’s very unlikely you’ll be able to change the properties of the links in the WordPress sidebar from the theme’s administration panel.
Let’s change the link color of the Latest Articles widget on ULTIDA.
First, you need to find the correct CSS name of the element.
You can find that with the Inspect button in your browser.
Start by right-clicking on the link and clicking inspect.
I usually use Google Chrome, which has the most options and is the most user-friendly.
A popup window will open after you click the inspect button.
Now click the Elements button to see the highlighted link displayed with the CSS syntax in the right column.
All we have to do next is to alter the code we used above to slightly:
.widget a {color:#5195C2;}
This CSS will only change the link color in the WordPress widgets (sidebar and footer).
The options here are limitless.
Change only the color of the sidebar links
I hear you.
You only want to change the color of the links in the sidebar widgets because your footer has a different background color.
Anything is possible with CSS but you need to find the correct elements.
That’s it!
You will see that our theme uses sp-sidebar as the element name for the sidebar if you check the image above.
The CSS code to change the color of the sidebar links is:
#sp-sidebar .widget a {color:#5195C2;}
And the following code only changes the color of the titles with links in the sidebar widgets:
#sp-sidebar .widget h4 a {color:#5195C2;}
CSS allows you only to change the color of certain elements, but you need some coding knowledge to delve into details.
5. Bonus: How To Change Link Hover Color In WordPress
Now that you are comfortable with changing the color of the links with CSS, let’s take a look at how you change the link’s hover color.
Some of the MOST advanced WordPress themes might have this setting in theme options, so first check if this option is in the WordPress customizer.
If it’s not in the customizer, CSS is the only way to change that.
Fortunately, you are now already a CSS master and that won’t be a problem.
Use the inspect button in your browser and navigate to the link you want to change.
The CSS code is only slightly different from the examples above:
a {color:#5195C2;}
The code above will change the color of the link only on the mouse-over event.
Let’s replicate the rest of our examples to a hover example:
- .widget a:hover {color:#5195C2;}
- #sp-sidebar .widget a:hover {color:#5195C2;}
- #sp-sidebar .widget h4 a:hover {color:#5195C2;}
Conclusion
Now you know how to change link color in WordPress quickly.
My recommendation is to stick to the theme customizer if it allows it.
But even if you decide to change hyperlinks individually (because you don’t like their default blue color) the process won’t take you long.
Enjoy!
FAQs About Changing Link Colors In WordPress
How do I change the color of links in WordPress?
You can change link colors in WordPress by customizing your theme’s CSS. Go to “Appearance” > “Customize” > “Additional CSS” and add CSS code like “a { color: #yourcolor; },” replacing “#yourcolor” with your desired color code.
Can I change link colors without coding?
Yes, some WordPress themes offer options to change link colors through the theme customizer interface without needing to write any code. Or you can pick a WordPress plugin to avoid coding.
How do I change link colors for specific pages or posts?
Use page-specific CSS classes to change link colors for specific pages or posts. For instance, “.page-id-123 a { color: #yourcolor; },” where “123” is the ID of the page or post.
Is it possible to change link colors on hover?
Yes, use the CSS “:hover” pseudo-class. For example, “a:hover { color: #hovercolor; }” to change the color when the mouse hovers over the link.
How do I find the right CSS selector to change link colors?
You can use the browser’s developer tools to inspect the page and identify the correct CSS selector for the links you want to change.
Can I change link colors in a WordPress widget?
Yes, target the widget’s CSS class or ID in your custom CSS. For example, “#widget-id a { color: #yourcolor; },” replacing “widget-id” with the actual ID of your widget.
Will changing link colors affect my website’s SEO?
Changing link colors alone doesn’t directly affect SEO, but ensure that links are still easily distinguishable and accessible for good user experience. (Because UX does impact SEO.)
Can I set different colors for visited and non-visited links?
Yes, using CSS you can define different colors. Use the “:visited” selector for visited links. For example, “a:link { color: red; }” for non-visited links and “a:visited { color: green; }” for visited links.
