Add Additional Link Color Setting To Customizer

This tutorial enables you to add a 2nd setting to the WordPress customizer which enables you to change the link colors for any specific classes or areas on a page. This way you can change the link colors twice producing 2 different colors for links.

The following screenshot shows you how 2 different link colors are used in the same entry using the additional setting added to the customizer.

Installation #

The video shows you the additional link color setting added to the customizer and how it can be used to change the color of links so they’re different to the default link colors which are also set via the customizer.

The tutorial has been written based on this question from a member:

I have a question, I am using Infinity Pro child theme and I want to change the link color on page, in the customization panel you can set the accent color, this then overrides the setting in the style.css. I want the accent color to remain for the nav but not the links on page. Any ideas how I can do this?

Here’s the code:

Download Folder

Step 1 – Copy & paste the 1st code snippet from the file named code.php located inside the download folder before the closing curly bracket at the end of the infinity-pro > lib > customize.php file.

Step 2 : Print Inline Styles #

Step 2 – Copy & paste the 2nd code snippet from the file named code.php located inside the download folder to the end of the infinity-pro > lib > output.php before the closing curly bracket:

Tested using the Infinity Pro child theme by StudioPress.

Note for members : Installation support is included for all tutorials.