How to quickly use LESS in a WordPress theme

CSS preprocessors are awesome. You should use them.

The two most common CSS preprocessors undoubtedly are LESS and Sass, with the latter slightly more feature complete, while LESS is progressively filling the gap.

LESS is also the easier to implement of the two.

This article is about how to quickly implement LESS within your development for 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).

The order in which you include the style.less and the less.js files is critical.

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

So how do we rapidly add LESS to a WordPress theme and kick in some good development time?

Use LESS with a WordPress theme, the simple way

An elementary method, which also is easily reusable, involves a bit of code to add into the functions.php file. It might not be the most elegant way, but it is simple and it works.

Also, since you're using LESS, you may want to properly organize your files each in its appropriate folder.

So let’s keep the apples in their own basket.

Making order

Create a new folder within your them, and call it less.

../wp-content/themes/YOUR_THEME/less/

Copy and paste in it the file less.js and all the other .less files you will use, like reset.less, modules, and the main stylesheet, which I'll call style.less.

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

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 with future releases.

Loading the juice

Now we need to load all we need into the markup of the page, within the HEAD. We do that with the following code to add to your functions.php file.

function load_LESS() {
  $path = get_stylesheet_directory_uri() . '/less/';

  /* 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>' . "nn";

  print $output;
}

// No need for 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.

This implementation should also automatically refresh the page when you save a change to style.less.

LESS, preprocessors, and production

Preprocessors are meant for development. Before going live you want to clean up you code, minimizing and compressing it. It is recommended to use plain CSS for production.

Also, be aware the file style.css is still required because it contains the details of the theme.

However it is not necessary for a theme to run, and it can be removed from the the HEAD of your pages, adding the following line to your functions.php file.

wp_dequeue_style( ‘style.css’ );

Resources for LESS