How to implement LESS in WordPress, first approach

I recently discovered LESS, as defined by its creator “The dynamic stylesheet language”. A method to write CSS using variables, functions and improved classes. I fell immediately in love with it and I pondered about how to implement LESS into my WordPress development and workflow. In fact I want my new themes to be responsive and if I’m right in my judgement one of the best way to achieve that goal at the moment is to implement The Semantic Grid System. Since this relies on LESS to work, I need it to work on my framework.

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

Sincerely, my first attempts to add LESS to WordPress weren’t that brilliant. I later discovered that a plugin, called WP-LESS, can do the trick but I really don’t want to rely on an external code to run my themes. That would add complication for my customers, who will need the plugin in order to run the theme. Indeed, the plugin provides a bootstrap for themes, you may want to check it out.

On the other hand, before to deploy the final release of the theme, it is a good practice to minify all the CSS in order to improve the performance, plus to not rely on Javascript to run your website (what about if the user has disabled it?).

Let’s dig into this LESS thing!

So, here my first approach to the LESS thing with WordPress. It may be a bit rough but for now it works fine and it allows me to relax and start kicking in development.

As explained clearly on lesscss.org, in order to work properly, the javascript that compile your LESS styles has to be loaded immediately after the link to the LESS stylesheet. As you see in the lines below the stylesheet isn’t saved as .css format, but instead as .less.

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

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.

So, even if mine might not be a particularly elegant solution, it’s still a valid turnaround and it works for me. Let’s see.

Adding LESS to WordPress

First, to keep everything neat, I create a folder in all my themes called library. Inside I put all the files I need to provide options, multiple styles, functions, power-ups, and everything that could clutter the template directory. So, for LESS, within the library folder I create two more subfolders called js and styles. Not much fantasy here.

These subfolders come in handy also for other scripts you may need to use, and other css files like reset.css and something like grid.css.

But for our purpose, in the js folder I put the less.js file, and in styles the styles.less file. At the time of this article, the last release of less.js is 1.1.3, you can download it from lesscss.org.

Loading all the juice

Now we’re gonna rock! In functions.php add these lines.

<?php 
// Setting paths to the resources we will need later, js and styles
$path_to_js 	= get_stylesheet_directory_uri() . '/library/js/';
$path_to_styles = get_stylesheet_directory_uri() . '/library/styles/';

// We don't want to load unnecessary things when browsing the Dashboard, right?
if ( ! is_admin() ) {

	function load_LESS() {
	
		// Retrieving the paths we set above
		global $path_to_js, $path_to_styles;
		
		// Actually printing the lines we need to load LESS in the HEAD
		print "\n<!-- Loading LESS styles and js -->\n";
		print "<link rel='stylesheet/less' id='style-less-css'  href='" . $path_to_styles . "style.less' type='text/css' media='screen, projection' />\n";
		print "<script type='text/javascript' src='" . $path_to_js . "less-1.1.3.min.js'></script>\n\n";
	}
	
	// Adding the action to the HEAD
	add_action( 'wp_head', 'load_LESS' );

} // END ! is_admin() 
?>

Then open the file style.less with your CSS Editor and play with it. You should be able to style your theme using the LESS’ awesomenesses.

Conclusions

Yep, we’ve done. It wasn’t that complicate, right?

I’m aware that there should be a better way to manage the thing. And I’m working on it. But right now, this method is super simple, requires almost no efforts in order to work, and it works smoothly.

Later, once you’re ready for deployment, you can run a compiler for LESS like LESS.app for Mac OS X, point it to the folder of the theme and get your LESS file minified and neat, the output will be a pure CSS file. No further need to load the less.js to compile it on the fly, you will link a simple, optimized .css file, like we usually do.

<link rel="stylesheet" type="text/css" href="styles.css">

Hoping this article will be of any help. As usual your comments are very welcome, specially if you have a better solution. Please, let us know! Thanks for reading!

About LESS and useful related resources

• The LESS official website
• LESS.app for Mac OS X
• Less.js Will Obsolete CSS
• The Semantic Grid System
• LESS Elements, a collection of useful LESS mixins
• Using the LESS CSS Preprocessor for Smarter Style Sheets
• An Introduction To LESS, And Comparison To Sass
• The Semantic Grid System: Page Layout For Tomorrow