Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Change the Link Color in WordPress (Beginner’s Guide)

Do you want to learn how to change the link color in WordPress?

Changing the link color can make it easier for visitors to find their way around your website. It can also help your site stand out by creating a unique color scheme.

In this article, we will show you how to change the link color in WordPress, step-by-step.

How to change the link color in WordPress (beginner's guide)

Why Change the Link Color in WordPress?

When you add a link in WordPress, your theme will automatically determine the color of that link. Sometimes your WordPress theme’s default colors will be exactly what you want, but other times you will want more control over how the links look.

For example, you might want to change the link color to match your brand or custom logo. Or you may want to boost the color contrast to make your site more accessible to readers with limited vision.

Some themes allow you to change the link color directly from the theme options panel or the WordPress theme customizer, so make sure you check these places first. It’s also worth looking at your theme’s documentation.

That being said, let’s take a look at a few ways you can change the link color on your WordPress website, no matter what theme you are using. Simply use the quick links below to jump straight to the method you want to use:

Video Tutorial

Subscribe to WPBeginner

If you prefer written instructions, just keep reading.

Sometimes, you may want to change the color of individual links. For example, you may want to draw the visitor’s attention toward a call to action on a landing page.

To do this, simply click on the link that you want to customize. Then, in the right-hand menu, select the ‘Block’ tab.

Customizing an individual link in the WordPress content editor

In the ‘Color’ section, you need to select ‘Link.’

You can now choose a new color from the popup that appears.

Customizing a URL color in a WordPress page or post

To customize more links, simply repeat these steps.

When you are happy with how the links look, click on either ‘Update’ or ‘Publish’ to make your changes live.

The easiest way to change the link color is by adding custom CSS to your WordPress site.

Often you will find code snippets in WordPress tutorials with instructions to add them to your theme’s functions.php file.

The biggest problem is that even a tiny mistake in the custom code snippet can break your WordPress site and make it inaccessible. Not to mention, if you update your WordPress theme, then you will lose all your customizations.

That’s where WPCode comes in.

This free plugin makes it easy to add custom CSS without putting your site at risk.

The first thing you need to do is install and activate the free WPCode plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, head over to Code Snippets » Add Snippet.

Adding custom CSS snippets to WordPress using WPCode

Here, simply hover your mouse over ‘Add Your Custom Code.’

When it appears, click on ‘Use snippet.’

Adding custom code snippets to your website

To start, type in a title for the custom code snippet. This can be anything that helps you identify the snippet in the WordPress dashboard.

After that, open the ‘Code Type’ dropdown and select ‘CSS Snippet.’

Customizing the color of URLs using WPCode

You can now go ahead and add a custom CSS snippet to the code box. Let’s look at some of the different snippets you can use.

Change the Link Color Across Your WordPress Website

To start, you may want to customize the overall link color. This is the color that visitors will see before they click on a link.

To do this, simply add the following snippet into the WPCode code box:

a {
     color: #FFA500;

In the above example, the # hex code will change the link color to orange, so you will need to change#FFA500 to the color you want to use.

If you are not sure what hex code to use, then you can explore different colors and get their codes on the HTML Color Codes website.

When you are happy with how your code looks, click on the ‘Inactive’ toggle so that it shows ‘Active’ instead. Finally, click on ‘Save Snippet’ to make the CSS snippet live.

Changing the link color in WordPress using a code snippet plugin

Now, if you visit your WordPress website, you will see the new link color in action.

Change the Link Hover Color in WordPress

Another option is to change the link hover color. This is the color that appears when a visitor hovers their mouse over a link, so it’s a great way to catch their attention.

To make this change, simply paste the following snippet into WPCode’s editor:

a:hover {
     color: #FF0000;
     text-decoration: underline;

The code above will change the link color to red and underline the text when visitors hover over it. As before, you can change the #FF0000 hex code to any color you want to use.

When you are ready to go live, you can publish the code snippet by following the same process described above.

Change the Link Color After Visit in WordPress

Next, you may want to change the link color after a user clicks the link. This can help visitors find their way around your WordPress blog by showing which links they’ve already clicked.

You can use the CSS code below to change the visited link color:

a:visited {
     color: #0000FF;

As always, make sure you change the blue #0000FFhex code to the color you want to use in your links.

With that done, click on the ‘Inactive’ toggle so that it changes to ‘Active.’ Then, just click on ‘Save Snippet’ to make the code live on your site.

Changing the WordPress link color using WPCode

Change the Color of Your Navigation Links in WordPress

Finally, you may also want to customize your navigation menu links.

Customize navigation menu links

For more details, see our guide on how to style WordPress navigation menus.

Instead of adding CSS code directly to your website, you can use a CSS styling plugin to visually edit your site.

We recommend using the CSS Hero plugin. It’s very beginner friendly and lets you visually customize your website, similar to a drag and drop page builder.

After installing the plugin, click the ‘Proceed to Product Activation’ button to activate it and connect your account.

Activate CSS Hero

This will take you to a screen where you can enter your username and password.

Then, simply follow the onscreen instructions to verify your account. After that, CSS Hero will take you back to the WordPress dashboard automatically.

Next, click the ‘Customize with CSS Hero’ button at the top of the WordPress admin toolbar.

Customize with CSS Hero

This will open your website with CSS Hero running on top of it.

CSS Hero uses a What You See is What You Get (WYSIWYG) editor. This means you can click on any content to open a toolbar that lets you customize that content.

To get started, click on an example of the link that you want to edit. In this guide, we will customize blog post links.

Click on website link

After selecting a link, click the ‘Typography’ menu item and choose a new color for your links.

You can either select a color from the list or add a hex code.

Select typography option

Change the Color of Your WordPress Navigation Menu

Next, you can use CSS Hero to change the color of your WordPress navigation menu links.

Simply hover over your navigation menu and click any of the menu items.

Click on navigation menu link

Then, select the ‘Typography’ option.

You can now choose the color that you want to use instead.

Customize menu color CSS Hero

Once you have finished changing the link colors, simply click the ‘Save and Publish’ button to make your changes live.

We hope this article helped you learn how to change the link color in WordPress. You may also want to see our guide on how to create an email newsletter or our expert picks for the best email marketing services for small businesses.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

9 CommentsLeave a Reply

  1. The code was able to change the link colours in the side bar but not the links in the article. How do I change the colour of the link in the article?

  2. Thank you, this is so helpful! Is there a way you can share how to add bolded links in CSS? I’d like to make all my links bold.

    • You should be able to add bold in the post editor for your links the same as you would for other text in your paragraphs without needing to edit your CSS.


  3. Great Article! When using CSS Hero to change link colors for example, if I change the color on one blog post link does it change all links on the site the same way inserting the CSS code directly does?


Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.