Menu
Disclosure: ULTIDA's content is free & reader-supported. We may earn a commission if you click & buy through our links. Your support helps us create the best content & make a difference.
Tutorials

How To Change Link Color In WordPress (In 2022)

how to change link color in wordpress

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 especially important if you build a vast knowledge base full of tutorials and courses.

That’s why it’s very important that links catch the eye of your visitors instantly!

(You can also use a link color that goes with your branding.)

This post covers:

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 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.

example of a bad link color in wp

And if your visitor will not find the knowledge he/she seeks on your website, they will leave and search for it elsewhere.

Thumbs DOWN for SEO.

So, let’s check how you can 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 take a look at how to actually change the color of the link.

My advice: If you’re unsure about the link color, you can go with the traditional “blue link.”

1. Change Link Color Using The CSS Code

You can enter a custom CSS code in either 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 provides a list of 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.

how get the color code from image to use for your link

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 have the option to change the typography settings in the WordPress 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 that your settings might be different from the example below.

(Don’t worry, you’ll find it easily. And you can also check the theme’s documentation for help.)

change link color via wordpress customizer

In our case, click on the Colors & Typography Settings button. This will lead you to the link color options.

set the color for your links

Click on the Select color button. This is where 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:

  1. You first need to highlight the text and add a URL to it.
  2. This will open a small popup with one of the elements being a down-pointing arrow.
  3. Click it.
  4. Then choose the Text color option and pick any from the ready-made colors or use a custom one.
  5. 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 just 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, and you will see the highlighted link displayed with the CSS syntax in the right column.

All we have to do next is to slightly alter the code we used above to:

.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.

inspect your element sidebar settings to change link colors

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!

No Comments

    Leave a Reply