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.
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!
Cool! The setting could also be sanitized, with the very convenient
sanitize_hex_color()function (part of core).Thanks Zach and Kirk! I pushed an update to my own code (https://github.com/govfresh/govpress/commit/58cecdd7483baa7c0085cefd2a58b97c4c461c5a) and will update this post.
I also started an issue for the underscores theme (https://github.com/Automattic/_s/issues/447) and think it would be worth making the color sanitization functions available outside the customizer (which would be a WordPress core issue). Any thoughts on that?
Added my 2 cents: https://github.com/Automattic/_s/issues/447#issuecomment-39004504
Nice work team! For anyone interested in the core patch for color sanitization, check this out: https://core.trac.wordpress.org/ticket/27583