WordPress is an excellent framework for blogging, and it is supposed to be easy. But it does have a learning curve when you are just starting.
Even though I am a developer by profession and have been working in website development for a few years, I still found myself stuck in finding stuff on WordPress dashboard to change link color on my WordPress blog.
So I am compiling this step by step guide, which will help you to customize your theme and change link colors on your WordPress blog.
So let’s dive in.
Steps to change link color in wordPress
Step #1 Navigate to the ‘customize theme’ option
Step #2 Check if your theme customization options allow you to set your theme color.
Step #3 Go to the ‘Additional CSS’ tab and enter your CSS to set link color value.
To make it easier for you to understand, I have added screenshots with this guide so you can follow along. Here is a screenshot of the page for which we have changed link color in this tutorial:
And here is how our end results with changed link color will look like:
Step#1 Navigate to the ‘customize theme’ option
So first, navigate to your Theme settings dashboard(WordPress Dashboard > Appearance > Customise).
And next, you should see your theme customize option tab something like this:
Step #2 Check if your theme customisation options allow you to set your theme color.
Most premium themes are generally highly customizable and allow users to set custom colors for theme options. So your theme might have an option for the setting.
So first, you should check if there is an option for setting color schemes in your theme.
In your customize options menu. Select ‘Theme Settings.’
In theme settings, you need to check all options which your theme provides and see if there is a direct option for setting colors for links. If you found it, just choose what color you would like and publish.
Here is a screenshot of how this option looks like on my screen
But remember, this might look very different on your theme, as your theme options would be different than mine
Step #3 Go to ‘Additional CSS’ tab and enter your css to set link color value.
Navigate to the ‘Additional CSS’ option in your customize options tab. Now you should see the CSS editor screen.
CSS Editor allows us to customize the appearance of our theme by enabling us to add your CSS styles to override the default styles of your theme.
Now, If you have never added any other custom CSS before or if you have recently replaced your theme, you will see the placeholder comment shown below.
/* Welcome to Custom CSS! To learn how this works, see https://wp.me/PEmnE-Bt */
It’s your wish if you want to delete this placeholder or not, as it does not matter actually.
So now, enter your custom CSS in this section. Your code will look something like:
As soon as you enter this code in CSS editor, your preview window on side should update and preview and your link color should be change in the preview window.
But your changes are not applied until you save your changes and publish them.
Understanding CSS code
If you are familiar with CSS and have some basic idea about it, this code should be straightforward for you to understand, and you can skip this section.
In this section, I will try to explain CSS and snippet, which we wrote in the CSS editor.
So if you don’t know what CSS is, CSS stands for Cascading Style Sheets, and it allows us to HTML elements. So if you understand CSS, it will enable you to set how it will be displayed on the screen.
A CSS rule consists of a selector and a declaration block.
In shown image, h1 acts as a selector. So this rule will be applied to all h1 tags on your website.
In the declaration block, it uses a CSS property and a value for it.
Now, these properties are predefined, that what properties you can set for HTML elements, and it has value BLUE, so h1’s property ‘color’ is set to ‘blue.’
Now they have set the value as ‘BLUE,’ which is a predefined value for a color, but if you need more variety, you can use any HEX color code or RGB functions.
Now if you have understood the basic concept of CSS then lets see the snippet which we have used.
So for changing link color. We have used a tag(defines a hyperlink) as a selector and have set color property to our custom color value.
Now, this will only change default link color but not for link states. To configure these a tag has four states
- a: link – a regular, unvisited link
- a: visited – a link the user has visited
- a: hover – a link when the user mouses over it
- a: active – a link the moment it is clicked
Suggestions to consider
- In this tutorial, we have used CSS editor to update CSS properties for links, but if you upload a new theme or reset your theme for some reason, these changes would not be retained.
So if you are resetting your theme or uploading a new one, you will have to make add these CSS changes again in CSS editor. - In this article, we have used ‘a’ as a selector in example so it will change color for all the links on your website.
But what if you want to change the link color not on a complete website, but specifically on a single post/Header/Footer?
In that case, your selector should only target that specific link section. It would look something like:
.single-post .post-content a {color: #0000ff;}So you will have to target class for that specific link in your selector.
Good luck customizing your link colors. Leave your feedback and queries in the comment section.