WordPress: how to wp_enqueue_style a LESS stylesheet

WordPress: how to wp_enqueue_style a LESS stylesheet

Posted by on Feb 22, 2014 in WordPress | 1 comment

In order to enqueue a LESS stylesheet using wp_enqueue_scripts and wp_enqueue_style a filter has to be applied to declare the stylesheet as stylesheet/less.

Using wp_enqueue_scripts we enqueue our LESS stylesheet using the following:

This is assuming your styles.less file is in the root directory of your WordPress theme. If successful you will see that a stylesheet has been loaded via wp_head() into the tags:

You will notice that fi-less which is the handle we gave to this stylesheet (they do have to be unique) becomes fi-less-css because it’s a stylesheet we are enqueuing and WordPress appends -css to all enqueued stylesheets. Similarly, it appends -jss to scripts enqueued using wp_enqueue_script.

We now have to add a filter to replace rel='stylesheet' with rel='stylesheet/less', in order to make sure we replace it for just that specific stylesheet, we have to rely on the handle of fi-style-css:

Don’t forget that in order for the theme to work, you must have style.css present in the root of your theme, so do not replace it with a style.less as the theme will not work. You also have to remember to enqueue less.js. So here is the full code, enqueuing all the necessary JavaScript and CSS files:

In this case styles.less will overwrite any CSS classes in style.css as the files are loaded in the same order they are enqueued in, but you still need style.css to declare your theme name, author etc for WordPress to see it as a valid theme.

    1 Comment

  1. It was very usefull! Thanks a lot!

Post a Reply

Your email address will not be published. Required fields are marked *