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.