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:

https://gist.github.com/devinsays/b5cbe81ce737f0f7e463

In my inline styles, I output the color option:

https://gist.github.com/devinsays/13c75347b239bfb938c0

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:

https://gist.github.com/devinsays/ea3b18acc2eccf02a927

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:
https://github.com/govfresh/govpress/blob/master/inc/customizer.php.

About Devin

I am a developer based in Austin, Texas. I run a little theme shop called DevPress and help manage a WooCommerce shop with Universal Yums. Find me on twitter @devinsays.

5 Responses

  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