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 your 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’ll show you how to change the link color in WordPress, step by step.

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’ll want more control over how the links look.

For example, you might want to change the link color to match your business’s 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’re using. Simply use the quick links below to jump straight to the method you want to use.

Video Tutorial

Subscribe to WPBeginner

If you’d prefer written instructions, just keep reading.

Method 1. Change Link Color in WordPress by Editing CSS (Recommended)

The easiest way to change the link color in WordPress is by adding custom CSS code.

To start, head over to Appearance » Customize in the WordPress dashboard and then click the ‘Additional CSS’ menu option.

This will bring you to a screen where you can add custom CSS code into a small code editor.

Simply copy the code snippets below and then paste them into this editor.

To start, we’re going to customize the color of all the links across our website. If you only want to customize the links that are in your posts and pages, then skip to the end of this section.

First, we’re going to customize the overall link color. This is the color that your visitors will see before they click on a link:

a {
     color: #FFA500;
}

This code will change the default link color to orange, so you’ll need to change#FFA500 to the color you want to use.

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

Change the Link Hover Color in WordPress

Next, we’re going 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.

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, make sure to change the #FF0000 color to the one you want to use.

Change the Link Color After Visit in WordPress

Another thing you may want to change is the link color after a user clicks the link. This can help visitors navigate 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;
}

Make sure that you change the blue #0000FF color to the color you want to use.

Once you’ve made your changes, click the ‘Publish’ button to make those changes live.

Once you’ve made your changes, click the ‘Publish’ button to make those changes live.

As already mentioned, the CSS code above will change the color of all the links on your site. If you want to only customize the links in your posts and pages, then use the code sample below instead:

.entry-content a {
     color: #FFA500;
}

.entry-content a:hover {
     color: #FF0000;
     text-decoration: underline;
}

.entry-content a:visited {
     color: #0000FF;
}

This code does the same thing as the samples above, but .entry-content only targets links within your pages and posts.

Change the Color of Your Navigation Links in WordPress

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

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

If you don’t want to add code directly to your WordPress theme, then you can use a code snippet plugin instead.

That way, your CSS changes will be applied even if you change your WordPress theme.

First thing you need to do is install and activate the 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.

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

Then, click on ‘Use snippet.’

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

In the code editor, either type in or paste any of the CSS snippets above.

After that, click on the ‘Inactive’ toggle so it changes to ‘Active.’ Finally, click on ‘Save Snippet’ to make the snippet live.

For more information, please see our guide on how to easily add custom code in WordPress.

Method 2. Change the Link Color Without Editing CSS

If you aren’t comfortable editing CSS files, then this method is for you.

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

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, you need to click the ‘Proceed to Product Activation’ button to activate it and connect your account.

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

All you have to do is follow the onscreen instructions to verify your account. After that, you’ll be taken back to your WordPress dashboard automatically.

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

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

CSS Hero uses what’s called 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 our example, we’re going to customize blog post links.

After that, select the ‘Typography’ menu item and choose a new color for your links.

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

Change the Color of Your WordPress Navigation Menu

Next, you can change the color of your WordPress navigation menu links.

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

Then, select the ‘Typography’ option.

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

Once you’ve 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 pick of 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.