My first publicly released theme, Follet (the one that powers this site right now), features my also first experiments working with the Customizer. This API offers a great way to see modifications to a theme in real time without actually having to apply those changes to the live site, and a large number of articles have been written about its benefits. What I learned while working on Follet was that sometimes is pretty difficult to manage some styling modifications for the customizable areas of the theme, and I particularly had a really nasty time with colours. However, I think I finally could solve that in an acceptably elegant way. The Problem You see, when you set a default color value for some areas of your theme, let’s say as a primary, dominant or accent color, you probably declare that default in a CSS file (most likely your style.css file) like this: Then, when replacing that color through the Customizer, you need to override the former value by having something like this a later point in your CSS definitions: Traditionally, this is solved printing a chunk of inline styles using the wp_add_inline_style() function, depending on the value of the property we’re modifying. Got the
Share This