How to change link color in WordPress

By: Einovex
Last Updated April 24, 2023

Are you tired of the same old link colors on your website?

Well, buckle up because today, I’m going to share some fantastic and easy-to-follow methods for changing link colors in WordPress.

Say goodbye to bland, default link styles and get ready to make your website stand out with eye-catching link colors that enhance user experience and elevate your site’s design.

6 ways to change link color in WordPress

Using the Customizer
Using a Page Builder
Using a Custom CSS
Using a Child Theme
Using a Plugin
Editing the Theme’s style.css file directly (not recommended)

Using the Customizer

Log in to your WordPress Dashboard.
Go to Appearance > Customize.
Click on the “Colors” or “Color Scheme” option in the customizer.
Look for the link color settings. It might be named “Link Color,” “Anchor Color,” or something similar.
Click on the color picker and select the desired color for your links.
Once you’ve chosen the color, click on the “Publish” button to save your changes.

Using a Page Builder

Install a page builder plugin of your choice (e.g., Elementor, Beaver Builder, or WPBakery Page Builder) from the Plugins > Add New menu in your WordPress Dashboard.
Activate the plugin.
Navigate to the page or post where you want to change the link color.
Click on the “Edit with [Page Builder Name]” button.
Select the text or element containing the link you want to change.
Access the settings or style options for the selected element.
Look for the link color settings and choose the desired color.
Save your changes and update the page or post.

Using a Custom CSS

Log in to your WordPress Dashboard.
Go to Appearance > Customize.
Click on the “Additional CSS” tab.
Add custom CSS code to target the links and apply the desired color. For example:

				
					a {
color: #yourcolorcode;
}

Replace ‘#yourcolorcode’ with the hexadecimal color code of your desired color.
Click on the “Publish” button to save your changes.

How to change link hover color in WordPress with custom CSS?

If you want to change the link color after putting the mouse cursor then you have to paste the following CSS code:

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

How to add different link colors on different posts & pages?

Open the post or page where you want to change the link color.
Right-click on the page and select “Inspect” or “Inspect Element” to open the browser’s Developer Tools.
Locate the <body> tag in the HTML code and find the unique class for that specific post or page. The unique class usually looks like postid-123 or page-id-123, where ‘123’ is the ID of the post or page.
Add custom CSS code to target the links in specific posts or pages using the unique body class you identified earlier. For example:

				
					/* Custom link color for Post ID 123 */
.postid-123 a {
color: #yourcolorcode1;
}

/* Custom link color for Page ID 456 */
.page-id-456 a {
color: #yourcolorcode2;
}

Replace ‘#yourcolorcode1’ and ‘#yourcolorcode2’ with the hexadecimal color codes of your desired colors for each post or page.

Click on the “Publish” button to save your changes.

How to customize the link color specifically within the content area of your posts and pages?

Open any post or page on your website.
Right-click on the content area and select “Inspect” or “Inspect Element” to open the browser’s Developer Tools.
Locate the parent container for the content area in the HTML code and find its class or ID. Commonly used classes or IDs are .entry-content, .post-content, or #content.
Add custom CSS code to target the links within the content area using the class or ID you identified earlier. For example:

				
					/* Custom link color for links within the content area */
.entry-content a {
color: #yourcolorcode;
}

Replace ‘#yourcolorcode’ with the hexadecimal color code of your desired color.

Click on the “Publish” button to save your changes.

Using a Child Theme

Create a child theme for your current WordPress theme (there are several online tutorials and plugins to help you with this process).
Install and activate the child theme.
Access your WordPress files via FTP or a file manager.
Locate the child theme’s folder and edit the style.css file.
Add custom CSS code to target the links and apply the desired color, as shown in method 3.
Save your changes and upload the updated style.css file to your child theme’s folder.

Using a Plugin

Install a plugin designed for customizing link colors (e.g., Simple CSS, SiteOrigin CSS, or WP Add Custom CSS) from the Plugins > Add New menu in your WordPress Dashboard.
Activate the plugin.
Follow the plugin’s instructions or documentation to change the link color using custom CSS (similar to method 3).

Editing the Theme's style.css file directly (not recommended)

Access your WordPress files via FTP or a file manager.
Locate the active theme’s folder and open the style.css file.
Add custom CSS code to target the links and apply the desired color, as shown in method 3.
Save your changes and upload the updated style.css file to your theme’s folder.

Remember, directly editing your theme’s style.css file is not recommended, as any changes may be lost during theme updates. It’s always better to use a child theme or a custom CSS plugin for such modifications.

What's Next

And there you have it!

You’re now equipped with various methods to change link colors in WordPress like a pro. But don’t stop there – it’s time to put your newfound skills to the test and experiment with different link colors that best suit your site’s design and branding.

Once you’ve chosen the perfect link colors, consider exploring other aspects of your website’s design, such as typography, layout, and images. Your site’s aesthetics play a crucial role in engaging visitors and ensuring they have a pleasant browsing experience.

Want more tips to level up your WordPress game? Check out our blog post on WordPress guide to further enhance your site’s usability and keep your visitors coming back for more.

So, go ahead and make your website shine with customized link colors, and don’t forget to keep exploring new ways to create a visually stunning and user-friendly WordPress site.