Header Tagline Color in the Theme Customizer


The custom header feature allows the user to set the color of the header text. But what if you’d like for the site title to be a different color than the site tagline? This is an issue I just hit in the GovPress theme I’ve been working on.

To solve it I added an additional option to the theme customizer:

In my inline styles, I output the color option:

Escaping the color option output

Kirk Wright and Zach Tollman both mentioned escaping the output of the the color option in the comments below, so I’ve updated the above code snippet to include sanitize_hex_color. However, this function isn’t available when the theme customizer isn’t loaded- so that will also need to be added to your code:

Post Message Support

I also have postMessage support so the updated colors appear instantly, but I’ll let you pick through the code if you’d like to update that.

Check out this code (with additional options as well) on GitHub:

About Devin

I'm a WordPress developer based in Austin, Texas. I work with the fantastic crew at 10up and also run a little theme shop called DevPress. Find me on twitter @devinsays.

5 thoughts on “Header Tagline Color in the Theme Customizer

  1. Awesome write-up, Devin! I really appreciate your work on encouraging devs to use the customizer more. It can be a little tough to get your feet wet with it at first and I thank you for helping ease the transition for people new to the customizer.

    One suggestion is that when printing the color value into the CSS, you should escape the value. I think that WP_Customize_Color_Control automatically sanitizes the value on input, but it should also be escaped on output. WordPress now has maybe_hash_hex_color() to handle this; however, that function is only available when the customizer is loaded. At The Theme Foundry, we usually just duplicate the function so we can use it wherever we want.

    Excellent work, Devin!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>