Getting LESS css to work with Wordpress

If you haven’t heard or LESS, or Sass, maybe you have been living under a rock or something. But both have been around for a little while now and have become one of the many new web trends. Basically it is your programmable stylesheet.

“LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.” – lesscss.org

Today I am going to show you how you can add LESS to your custom WordPress theme.

  1.  Download LESS JS
    Go to lesscss.org, click the download button and save the file to your themes js folder.
  2. Next we need to modify your functions.php file to include the less.js file
    function my_lesscss() {
    //First we register the script
    //wp_register_script( $handle, $src, $deps, $ver, $in_footer );
    wp_register_script( 'lesscss', get_template_directory_uri() . '/js/less-1.3.0.min.js', false, '1.3', false );
    //wp_enqueue_script($handle, $src, $deps, $ver, $in_footer); we already defined all these so we just need to call our handle
    wp_enqueue_script('lesscss');
    }
    //add_action( $tag, $function_to_add, $priority, $accepted_args );
    add_action('wp_enqueue_scripts', 'my_lesscss');
  3. Next we need to include our css/less file. I am currently using Twitter’s Bootstrap. My LESS files are in a less directory inside a bootstrap directory inside my theme folder (themes/mytheme/bootstrap/less/)
    function my_lesscss() {
    //First we register the script
    //wp_register_script( $handle, $src, $deps, $ver, $in_footer );
    wp_register_script( 'lesscss', get_template_directory_uri() . '/js/less-1.3.0.min.js', false, '1.3', false );
    //wp_register_style( $handle, $src, $deps, $ver, $media );
    wp_register_style( 'lesscss', get_template_directory_uri() . '/bootstrap/less/bootstrap.less', flase, '2.1', 'screen');
    //wp_enqueue_script($handle, $src, $deps, $ver, $in_footer); we already defined all these so we just need to call our handle
    wp_enqueue_script('lesscss');
    wp_enqueue_style('lesscss');
    }
    add_action('wp_enqueue_scripts', 'my_lesscss');
    add_action('wp_enqueue_style', 'my_lesscss');
  4. And finally one last piece. We need to modify the rel attribute. By default, WordPress puts rel=”stylesheet”. This will not work for us, we need to modify it to make it work with LESS. Thanks to this post I came across I was able to do this, slightly modified.
    function enqueue_less_styles($tag, $handle) {
    global $wp_styles;
    $match_pattern = '/\.less$/U';
    if ( preg_match( $match_pattern, $wp_styles->registered[$handle]->src ) ) {
    $handle = $wp_styles->registered[$handle]->handle;
    $media = $wp_styles->registered[$handle]->args;
    $href = $wp_styles->registered[$handle]->src . '?ver=' . $wp_styles->registered[$handle]->ver;
    $rel = isset($wp_styles->registered[$handle]->extra['alt']) && $wp_styles->registered[$handle]->extra['alt'] ? 'alternate stylesheet' : 'stylesheet';
    $title = isset($wp_styles->registered[$handle]->extra['title']) ? "title='" . esc_attr( $wp_styles->registered[$handle]->extra['title'] ) . "'" : '';$tag = "";
    }
    return $tag;
    }
    add_filter( 'style_loader_tag', 'enqueue_less_styles', 5, 2);
  5. And hopefully that all worked for you. Now keep in mind you would only want to do this for development. For production, you would want to link to a css file and not your less files.


I came across a great little tool today for mobile and tablet design, Adobe Shadow, from Adobe Labs. It’s pretty much a sync application, and with the Google Chrome Addon will sync to your device, over a local network, to whatever you have open in Chrome. You can edit your page with dev tools, and it will automatically update your device. Currently it supports iOS, Android, and Kindle Fire.

Pretty easy to get it up and running (about 10-15 minutes)

  1. Install the software from Adobe Labs
  2. Install the Chrome Extension
  3. Install the app on your device
  4. Start Adobe Shadow
  5. Start the app on your device, I had to add my IP address manually
  6. Enter the pass-code into the Chrome extension
  7. Enjoy

-JQ