How to use LESS css in wordpress theme development?

Question

I googled the same question but couldn't find the perfect answer, Can anybody make it clear on how to use LESS CSS in WordPress theme development? I don't want to rely upon online scripts.

I already tried https://github.com/sanchothefat/wp-less but no luck..

Answer 1

Your question is very broad? Too broad I think.

How does your develop process looks now? How do you want to compile your Less code.

Notice that Less code should be compiled into static CSS. Of course you can use the in browser version too, but in-browser compiling is not suitable for production.

Basically you should compile your Less into CSS first. You can compile styles.less into styles.css and upload that file into your wp-content/themes/yourthemes folder. Instead of styles.css you can use any other file and integrate in with the wp_enqueue_style function into your theme.

In the case that you want your Less code via the WordPress dashboard, you can install the WP Less to CSS plugin. This plugin compiles your Less code into a static CSS file as described above.

The JBST theme use the Less plugin describe above. You can also take a look at the Roots.io theme, which uses Less, npm and grunt to build.

Answer 2

A process that, for now, I use occasionally. I installed Koala, which creates CSS files from LESS on the fly. Then we create style.less and as we write code in it - through, for example, WinSCP upload to the server in the theme folder.

You can also use a copy of the site on a local server like OpenServer (OSpanel). With Koala create CSS automatically from LESS in theme folder on local server. After changes - upload them to the work server.

Answer 3

You can use Grunt.js to compile the file locally or some app lice CodeKit. Also you can use some wordpress plugins like this one: https://wordpress.org/plugins/wp-less/

I used that plugins before an it works fine.