how to Change the Link Color in wordpress

Beginners Guide on How to Change the Link Color in WordPress

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

Doing this give you power over the design of your site which can be easier for your users to navigate.

So we will show you step by step on how to change the link color in WordPress

What is Link Color in WordPress?

Your WordPress site’s link color is defined by the theme you use. If the theme doesn’t specify a rule for link color, then the default color by the browser is applied. As a rule of thumb, link should be styled in a way that visitors know that is a link

Why You Need to Change your Link Color in WordPress?

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

Some themes allow you to change the link color directly from your theme options panel or the WordPress theme customizer, that why you need to check your theme documentation before changing the link color with CSS.

let’s take a look at a few ways you can change the link color on your WordPress website.

How to change Link Color in WordPress

Change Link Color in WordPress Using Theme Editor CSS

There are ways to change the link color in WordPress is by adding custom CSS code.

First, you need to do is navigate to your WordPress admin dashboard and go to Appearance » Customize and then click the ‘Additional CSS’ menu option.

WordPress customizer to additional CSS

This will bring you to a screen where you can add your custom CSS code on the left side of the page.

You’ll be adding the CSS code snippets from this section of your editor.

Add additional CSS code screen

To customize the overall link color which is the color that your visitors will see if they’ve never clicked the link before.

Then you use the CSS code below.

a {
     color: #0084b1;
}

This will change the default link color to purple. Make sure you change the ##0084b1 color to the color you want to use.

Change the Link Hover Color in WordPress Using Theme Editor CSS

The next thing we’re going to change is the link hover color. That way, when a user hovers their cursor over a link, it will change color to get their attention.

You can use the CSS code below as an example.

a:hover {
     color: #0031FF;
     text-decoration: underline;
}

The code above will change the link color to blue and underline the text when visitors hover over it. Make sure to change the #0031FF color to the one you prefer.

Change the Link Color After Visit in WordPress Using Theme Editor CSS

You may want to change is the link color after a user clicks a link. This helps visitors easily navigate your WordPress blog and see which links they’ve already clicked on.

a:visited {
     color: #FF0000;
}

The code above will change the link color to red.

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

The CSS code above will change the color of all the links on your site. You can add the codes together and it will bring out single results.

Change the the links that are in your posts and pages Using Theme Editor CSS

If you want to only customize the links that are in your posts and pages, then you can use the code sample below.

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

Note: .entry-content only targets links within your content.

Change the Color of Your Navigation Links in WordPress Using Plugins

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

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

First thing you need to do is install and activate the Simple Custom CSS and JS plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, simply go to Custom CSS & JS » Add Custom CSS in your WordPress admin panel.

Once you’re done adding the code, make sure to click the ‘Publish’ or ‘Update’ button.

We hope this article helped you learn how to change the link color in WordPress. If you have any issue on this, you can use our comment session or join our delegate on facebook to solve any issues related to WordPress and subscribe to our YouTube Channel for WordPress video tutorials.

Share this Post

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top