How to Change Website Link Color in WordPress using CSS

Your website link colors are always defined by the theme you have installed. Some WordPress Themes will give you settings to change the link colors to your choice; some will not and will use a default site wide CSS setting to define the color.

Some of the ways you can change up your site’s look using CSS include:

  1. Changing the font color: here you can choose one of the hundreds of Google Fonts available, or go with something simple.
  2. Edit text font size and color: This is especially important for defining custom headers, which can really make your site pop.
  3. Add a background image: you can always  style your site’s background using CSS without limits.
  4. You can change the color of hyperlinks in your WordPress website?

NOTE: Your links should be styled and defined in a way that visitors can tell or know that is a link (blue or red color, cursor changed to a hand icon when you mouse hover on it).

How to use CSS?

CSS is a very important part of a website and this tells the website how to behave when launched, this means menu colors, photo styles, shadows, font face types e.t.c. As a web owner at the very least it is good to understand some basic level CSS as this can be super helpful when you want to customize your site.

Most of WordPress themes provide a section call Additional CSS under Apperance->Customize so you can add your own styling. So, if you know how to use and write CSS, you can easily edit anything related to style on your site. You can also search online for CSS codes for whatever purpose you want and try them out.

If your theme does not ptovide a custom CSS editor you can try the following plugins: Check Free Custom CSS Plugins to style your website without breaking code

But if you don’t know CSS, here is a simple guide

To change link color in WordPress, here are the steps you need to do to

  1. Decide then find the color you want to use as link color, your color code is best in hex mode for example blue color is
  2. Find the selector of the link on your site
  3. Write or add the new color rule in Additional CSS box
  4. Apply the changes and see the effect

No let us change the link color

Step by step to change WordPress link color

Find the color you want to use as link color

The first step is to search and selectthe code of the color you want to use. You can simply go google and search for color picker, chances are you’ll see one provided by Google:

For example: 1.           hex #0000ff (also known as Blue)  and is composed of 0% red, 0% green and 100% blue. Whereas in a CMYK color space, it is composed of 100% cyan, 100% magenta, 0% yellow and 0% black. It has a hue angle of 240 degrees, a saturation of 100% and a lightness of 50%. #0000ff color hex could be obtained by blending #0000ff with #0000ff. #0000ff (or #00f) is a websafe color. That’s your color code.

In my case, my color code is #0000ff

Add the code to the custom CSS editor

Once you have selected your code you can check the selector of links on your site. Normally, the link tag starts with <a. You may be tempted to use a as the selector as in this example:

add in style.css

a:link {
  color: #0000ff;
}

or

a {
    color: #ffb100 !important;
}

This code may or may not work depending on how your theme is structured. To increase the chance of our color is applied to the link, we need to add a bit more specificity such as using all links in the div with “secondary” ID, we can write the rule as follow:

  1. .container #secondary a {
  2. color: #5495ff
  3. }

You can also change the link colour for just the post and page contents by adding the following CSS code in the Custom CSS option of WordPress theme options on the following path.

Admin Area -> Apperance -> Theme Options -> Other -> Custom CSS


body.page .entry-content a,
body.single-post .entry-content a {
color: #0081cc;
}

body.page .entry-content a:hover,
body.single-post .entry-content a:hover {
color: #7ad03a;
}

You can refresh your site and see changes, if not try and clear cache or cookies to load the new colors.

Happy CSS writing everyone.

Please subscribe to our website for the latest tips, ideas and recommendations to make your WordPress site wonderful.

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 152 other subscribers

%d bloggers like this: