How to quickly use LESS in a WordPress theme

LESS is defined by its creator as “The dynamic stylesheet language”. In other words a method to write CSS using variables, functions and improved classes. I loved it from day one and I pondered about how to implement it into my development and workflow with WordPress.

I believe that a preprocessor can dramatically facilitate writing and managing stylesheet files. Indeed, I could go for LESS or SASS, and at the present day I decided to give a go to the former. Time will say if I am making a wise decision.

But first, what is LESS?

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. It runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).

So, it should be trivial to implement it into a theme for WordPress, right? Well, my first attempts did not brilliantly succeed. So I found out how to simply solve my impasse.

Use LESS with a WordPress theme, the simple way

If you want to rush and use LESS with your themes you can follow a simple, perhaps elementary method to do so that in return lets you relax and start kicking development.

As explained clearly on lesscss.org the order in which you include the stylesheet.less and the less.js files is critical. The latter has to strictly follow the former. Using wp_enqueue_script() it is unlikely to give us the desired result.

So, even if someone would say that it is not elegant, my solution is simple and works just fine.

Adding less.js to your theme folder

Create a new folder, name it lesscss and move it into your theme folder.

../wp-content/themes/yourtheme/lesscss/

Into it place the file less.js and all the less files you may need to use, like browser reset, and the main stylesheet you are going to use.

../lesscss/
   - less.js
   - stylesheet.less
   - reset.less
   - and so on...

It is nice when everything that fits together stays together, isn’t it? As a note, less.js does not deal as expected with imported .css files. So I just change the extension of everything that needs to be imported in .less as well.

At the time of this article (October 2011), the last release of less.js is 1.1.3, and you can download it from lesscss.org.

Loading the juice

Next step is to load the goodness into the HEAD or the page. In functions.php add the following function.

function load_LESS() {

	$path = get_stylesheet_directory_uri() . '/lesscss/';
	
	/* LESS stylesheet and less.js */
	$output = "\n"."<!-- Loading LESS stylesheet and less.js -->"."\n";
	$output .= '<link rel="stylesheet/less" type="text/css" href="' . $path . 'stylesheet.less' . '"/>' . "\n";
	$output .= '<script type="text/javascript" src="' . $path . 'less.js"></script>' ."\n";
	
	/* Auto refreshing the page when saving the stylesheet */
	$output .= "\n" . "<!-- Autorefresh for LESS.js -->" . "\n";
	$output .= '<script type="text/javascript">' . "\n";
	$output .= '  less.env = "development";' . "\n";
	$output .= '  less.watch();' . "\n";
	$output .= '</script>' . "\n\n";
	
	/* Printing on page */
	print $output;
}
if ( ! is_admin()) add_action( 'wp_head', 'load_LESS' );

Done that you are ready to go. Open the file stylesheet.less with an editor and start playing with it.

In the function above I added the block for refreshing automatically the page when saving the stylesheet.less file. Better removing it in production.

Done, get out and play with it!

Hopefully this will help someone. I am having quite a fun experimenting with LESS. It is already improving my workflow and I am very happy about.

Thanks for reading, and as usual, if you have any comment or would like to suggest a better method, please do so using the comment area.

Resources for LESS

15 thoughts on “How to quickly use LESS in a WordPress theme

  1. Thanks Kegan,
    indeed, LESS is awesome. I started only recently to play with it and I’m still exploring its boundaries. I should invite you to give it a try as soon as you can. And looking forward to have news about ;)

  2. Hallo Jitendra!
    I’ve the feeling that Sass could be slightly more powerful that LESS, but at the cost of an additional complexity. On the other hand, LESS is super simple to implement. Are you using Sass in your workflow? Regards, ciao!

  3. Hi Carlo!
    Good tutorial!
    I just start to work with less and i have problem with IE7, looks like not working.
    I still didn’t understood why use a less file if it’s possible to compile in a pure CSS.
    So isn’t better to use directly the css file compiled from LESS app? And shoudn’t be used just in development site?
    Grazie e a presto.

  4. I’m just discovering LESS, so I found this article. Just one thing I wanted to note:

    If you just enqueue less.js with wp_enqueue_script() it’s likely not gonna work, because you have no control on where the script will be added in the head. Probably not exactly where we need it.

    Maybe you’ve discovered this, but I think WP outputs styles, then scripts. And you have some control on where a script outputs by setting the $deps parameter of wp_enqueue_script. A script will be output after everything it’s dependent on.

    Anyway, I’ve decided to bundle WP-LESS with my theme :-)

  5. Hello Steve,
    thanks for the suggestion. I will try to make good use of it.

    How’s going with the WP-LESS plugin? I tried that option, but it not work as I wanted in the past.

  6. Pingback: SixteenInk
  7. Thanks so much for this article. I just wasted two hours trying to get WP to work with LESS. Finally found your post, implemented and all works well!

  8. I would suggest you to use Lessify WordPress Plugin as it works perfectly and i am quite using this all of my projects. Just download and install the plugin and it worked perfectly.

  9. Hello “Sagar Seth”, or should I call you “Nirmal Ram”? ;) I suggest you to decide what’s your name and stick with it. Anyway, I do prefer keeping things simple and understandable. Your code looks way too complicated. I dislike the idea to load so much stuff just to implement LESS. Overkill in my opinion.

    Beside, if I would like to use a plugin for this purpose I would rather go for WP-LESS.

    http://wordpress.org/plugins/wp-less/

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>