It is not uncommon for people to make WordPress change link color on their websites. Especially, popular brands like to have their own tone in the website with everything properly customized, including the links.
For common scenarios, most links are painted blue and turn purple when hovered or clicked. However, it is possible to change color of links in WordPress without any super hard procedures. Developers know how to do it. But it’s a different story for a new guy on WordPress.
So, in the article, we will be learning how to make WordPress change link color using 4 different methods-
- WordPress customizations
- CSS color codes
- Page Builder plugin (i.e. Elementor)
- Dark mode plugin (Darklup for WordPress)
How to change link color in WordPress using the ‘Customize’ menu
The most convenient way to change link color on WordPress is by going through the theme customization menu. Although not every WordPress site has this option available due to the theme you are using, it’s worth a shot looking into it.
This is the simplest process to change color of links in WordPress without any coding. Of course, you don’t have to deal with CSS here, just my easy steps.
Below is how it’s done-
- First, get into the backend of your WordPress website.
- Now, look for the Appearance section below, on your right-hand side, and then hover over it.
- From the popup menu, click on the Customize option
Now, you will be redirected to the theme editor page where everything you do will directly change the layout of your website. Let’s continue-
- On the new page, go to the option named General. It’s on the top.
- There, you will find the Color section, click it.
- Once in, you can scroll the options till you find the color settings for links.
Once you have located the options, you know how to change hyperlink color in WordPress, right? If not, see the image below.
Just click on the color change icon to make WordPress change link color with a universal color menu. Now, search for your desired link color using google or any color picker software.
Once you have the color code for the color you want, just paste the code inside the color option on your theme customization menu. You can also use the color wheel to randomly look for any good tone on your own and use it for the links.
Just make sure to use separate colors for the link normal mode and hover mode. The hover mode can also go as clicked color. It’s important to pick a different color to help the users understand if the click works or not.
However, each WordPress theme is built differently. We were using the Kadence theme by the time we wrote this article. Including the customization options, many things may not match for a different theme that you are using.
So, it can be a bit tricky to find the WordPress change link color options in your WordPress dashboard. Please be sure to contact the theme author for support.
That goes option number 1. Now time for the next one.
How to change active link color in WordPress using CSS
Changing the active link color in WordPress is not a big deal if you know your way with CSS codes. Although there are easy ways, many developers prefer to work with CSS as they want everything customized on their own.
This method also requires you to get into the theme customization settings from WordPress. Like previously, locate the Customize option and get into the settings window.
Now, you need to find the Additional CSS option instead of the Color option here. The Additional CSS option is available for all themes in WordPress. If you can’t find the option, you might need to buy the pro version of the theme or contact support.
On the page, you will find some general instructions above the code field. On the field, you can put the code to change color of links in WordPress. For your concern, you can follow the codes from Binary Carpenter. Just copy the code text and paste it in the field to modify the theme’s CSS, insert whatever color code you desire and you’re set.
The theme customization menu is a sophisticated system that affects the condition of the site itself. Once you make WordPress change link color, you can preview it live without actual implementation.
If you think all’s okay, just hit the ‘Publish’ button to apply the changes. Once published, you can not readily revert the changes as you would need to do everything again from scratch.
How can you change link hover color WordPress from Page Builders?
The third method is to change the link color using the page builder settings. Page builders are the plugins that integrate with WordPress and let you create and customize webpages using their own interface, instead of directly from WordPress.
There are a good number of page builders available. Among them, we prefer Elementor the most because it’s easier to work with and packs with a ton of features.
So, our third method to make WordPress change hyperlink color is going to be based on Elementor page builder. If you don’t have it installed on your site, feel free to visit the link and download it.
You can also install it from your WordPress Dashboard> Plugins> Add New> and search for Elementor in the search field.
Anyway, let’s get into the procedures-
- Open any page using Elmentor page builder
- Click on the Edit Section icon
- Press onto the Style tab
- Look for the Typography section close to the bottom of the menu
- You will see options to change the normal & hover link color there
- Now try changing the link color from the color wheel for the specific section or the whole website
- Go to the preview window to confirm the changes and then hit the ‘Publish’ button
Following these simple steps, you can easily make WordPress change hyperlink color on your website. If you still feel confused about the procedure, try watching the video. It will tell you exactly what to do.
Darklup dark mode for WordPress lets you customize colors
The last method to make WordPress change link color is to set up the Darklup dark mode plugin on your WordPress website. The plugin has dedicated controls for changing the link color on WordPress. It also includes other color settings like text, background, button, etc.
For the record, Darklup is a dark mode plugin for WordPress. If you don’t know what dark mode is, then we prefer that you read the text below.
What is Dark Mode?
The dark mode is a feature that creates a dark interface on your site frontend or backend (or both) to prevent lights from hurting your eyes in low-light conditions, like at night.
By its application, dark mode it’s limited to website only but a feature supported by various mobile devices, windows, mac, and popular platforms like Facebook, YouTube, Twitter, etc.
It’s a common feature of modern devices and online platforms to have a lot of white spaces on the screen. Due to the color intensity, the screen always emits brighter lights that are not good for your vision.
Dark mode can swap the white part of the screen with the black part, almost reducing the amount of light coming from those parts to zero. Also, the total lights on the screen dim a lot, easing your eyes, and making you feel comfortable.
That’s enough about the dark mode feature. Let’s learn how Darklup can trigger the dark mode or change color of links in WordPress.
How can dark mode affect my site?
The Darklup dark mode plugin is an impressive tool for initiating dark mode on your website. Technically, it’s not possible to switch to dark mode on a WordPress site unless you use Darklup.
In case you are wondering another way to activate dark mode on WordPress, the answer is “Yes”. There is a way except using Darklup but it’s not recommended.
For that, you will need to access the WordPress theme editor page and use sophisticated dark mode CSS code in the editor. One wrong move and you will crash the site. Also, it won’t be as refined as you are imagining it to be.
There’s also the trouble of going through all the trouble just to slightly change the color a bit. So, developers hardly suggest using CSS dark mode codes.
With Darklup, the situation is totally different.
How easily you can trigger dark mode
All it takes is a flip on the switch to initiate the dark mode on WordPress using Darklup. The trigger button is located inside the General Setting tab on the Darklup dashboard.
Once you have installed the plugin, head for the Darklup tab in your WordPress dashboard and navigate to the general settings section. Then just turn on the button and save changes.
