How to quickly use LESS in a WordPress theme

A preprocessor can make your life easier when writing CSS. At today we can choose between LESS and Sass, and while Sass is still slightly more powerful than LESS, the latter is easier to handle and implement, specially for fast prototyping.

This article is about how to quickly use LESS while developing in WordPress.

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).

Enqueueing the necessary files via wp_enqueue_script() is unlikely to make us happy, because the order in which you include the style.less and the less.js files is critical. The latter has to strictly follow the former.

<link rel="stylesheet/less" type="text/css" href="style.less" />
<script src="less.js" type="text/javascript"></script>

So how do we rapidly click LESS into a WordPress theme, relax, start playing around, and finally kicking development?

Use LESS with a WordPress theme, the simple way

A method, perhaps elementary, to do so is to add a little of code to your functions.php file, like explained here. It is not literally elegant, but it works just fine. And it is simple.

However, if you are moving your first steps with a preprocessor, you may want to take advantage of what a preprocessor can actually do for you. Like managing multiple files/modules and variables.

So let’s keep all apples in the same basket.

Adding less.js to your theme folder

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

../wp-content/themes/your_theme_name/lesscss/

In it copy and paste the file less.js and all the less files you may need to use, like browser reset, modules, and the main stylesheet you are going to use, the file style.less.

../lesscss/
  - less.js
  - styles.less
  - reset.less
  - typography.less
  - layout.less
  - grid.less
  -...

Apparently less.js does not correctly handle .css files as expected. To fix that I rename the extension of any .css file into .less, even if the content is still plain CSS.

At the time of this article the last release of less.js is 1.1.3, and you can download it from lesscss.org. What explained here should not change much with future releases.

Loading the juice

Next step is to load all we need into the HEAD or the page. Add the following function to your functions.php.

function load_LESS() {
  $path = get_stylesheet_directory_uri() . '/lesscss/';
  
  /* Import style.less and less.js */
  $output = "\n"."<!-- Loading LESS stylesheet and less.js -->"."\n";
  $output .= '<link rel="stylesheet/less" type="text/css" href="' . $path . 'style.less' . '"/>' . "\n";
  $output .= '<script type="text/javascript" src="' . $path . 'less.js"></script>' ."\n";
  
  /* Refresh the page when saving the main .less file */
  $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;
}

// We do not need LESS in the Admin area
if ( ! is_admin()) add_action( 'wp_head', 'load_LESS' );

Done that you are ready to go. Open the file style.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 style.less file.

LESS, preprocessors, and production

Preprocessors are meant for development. Before going live I feel like recommending cleaning up you codes, minimizing and compressing it, and ultimately using a plain optimized CSS file. You can use less.js live, it works, but it is not recommended. Please see the links below for furthering your LESS skills.

Also, be aware that WordPress will still load the file style.css (located in the root of the theme). This file is required because it contains the details of the theme, commented at its top.

You can remove it from the HEAD of your pages, adding the following line to your functions.php file.

wp_dequeue_style( 'style.css' );

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

 

carlorizzante

 

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=""> <s> <strike> <strong>