Change variable.less file through admin WordPress Customizer

Hi There,
I’m trying to use “WordPress Customizer API” to let users change the style of website.
for doing it, I have some different variables.less in my assets/less/ folder. (like variables_1.less, variables_2.less , …).
now I need to tell the main.less file change the file to load base on what user choose from “Theme Customizer Admin Panel”.
I would be appreciated if anybody help me to find solution.
Thanks.


You could do that with a conditional enqueue, but that would mean relying on LESS’s client side usage to compile your LESS into CSS in browser. But remember, just because you can do something doesn’t make it right :wink:

The alternative is to separate out the selectors affected by your various customization options and output those directly in your <head> with conditional values. That way your remaining, unchanging LESS can be compiled, prefixed, concatenated, and minified for faster page loads.

There are projects that would enable this. One of them is WP-LESS:


I’ve gotten so far as setting it up and playing with it, and it seems to work fine. You do lose the ability to do live CSS updates without refreshing the page, though.

I’ve considered the idea of having WordPress manage all of the compilation/concatenation/minification of both CSS and Javascript, but I haven’t dug into it. In theory you could take Grunt/Gulp completely out of the picture, and never swear about forgetting to fire up grunt watch again.

I’ve thought about doing something like this if I were ever to build a public theme for something like the WordPress theme repository.

Roots doesn’t have anything built in to handle something like this though, as it relies on having Node and Grunt/gulp installed.

I haven’t planned it all out, but I think the cleanest thing would be to set up a custom.css file with overrides, instead of compiling the main CSS file. Just seems like there would be more chance for breakage. I think the theme’s base css file should probably be untouched.

Then you could use something like http://leafo.net/lessphp/ to compile your css into a custom.css file and have that enqueued with the user’s changes. You could most likely hook into whenever the Theme Customizer is saved and have lessphp run.

That’s one way you could do it :slight_smile: