Integrating LESS CSS with WordPress

by |

Recently I had the need to create a base theme to include multi environment config files, LESS CSS and a couple of security features into WordPress. I’m going to show you how I have integrated LESS with a WordPress theme, including caching for production sites and without pre-compiling the less files so that you can work on your styles without slowing down your workflow.

First off let’s talk a little bit about LESS and why it’s good for development. LESS is a CSS pre-processor, which means the CSS is processed before being turned into standard CSS. This allows the processor to make changes to the CSS, a good example is variables. With LESS you can define a variable (let’s say a hex color code) and use that variable throughout all of your stylesheets. If in the future the branding changes on the site and you need to update a few colors, this is easy when you can change the variable at the top of the LESS file.

For more information on LESS head over to: http://lesscss.org/.

LESS Preparation

The first thing we need to get hold of is the PHP library we will be using to compile our LESS files and put that into our base theme directory. Then we need to add some LESS files to be compiled.

  • Go to https://github.com/oyejorge/less.php and download all of it as a zip file.
  • Inside your theme folder create a folder called lib.
  • Extract the zip file into our newly created lib folder.
  • Next create a folder called CSS inside your theme folder (unless it already exists).
  • Inside the CSS folder create another folder called LESS.
  • Finally create a new file called style.less (this will be our main LESS file).

Ok great we have everything we need in a nice organised structure ready for us to begin.

Compiling LESS in WordPress

Next we need to add a function to our functions file, this will do a lot of the work for you and even enqueue the style in the head of your theme. Here is the snippet of code we will be using.

// Compile the less files via PHP and then served the cached file.
add_action( 'wp_print_styles', 'compile_less_files_to_css' );
function compile_less_files_to_css() {
	require('lib/less.php-master/lessc.inc.php');

	$to_cache = array( realpath(dirname(__FILE__) . "/css/less/style.less") => get_bloginfo('wpurl') );
	Less_Cache::$cache_dir = realpath(dirname(__FILE__) . "/css/less/cache");
	Less_Cache::CleanCache();
	
	$parser_options['compress'] = true;
	$css_file_name = Less_Cache::Get( $to_cache, $parser_options );
	
	wp_enqueue_style( 'style', get_template_directory_uri() . "/css/less/cache/" . $css_file_name );
}

First of all we add an action to wp_print_styles, allowing us to print out the stylesheet once we have compiled it. The function uses the LESS PHP library to grab the file we are looking for, compile and cache the file, clean the cache and then finally enqueue the style to the front end of the site.

That’s pretty much it for this tutorial, hope it helps and if you have any questions let me know below.

Comments