6 minute read

Using LESS with WordPress Once you try it you will never go back.

CSS precomilers are all the rage these days.  This is for a good reason, they are amazing!  Almost everyone at this point has seen frameworks such as Bootstrap that fully utilize LESS or SASS to keep their code readable, simple, and organized.  Using these precompilers with WordPress is easy too.  There is only one extra step that is necessary but you will get used to it or you can use Grunt or Gulp to get around it (more on this later). For this post I will be using LESS.  There is really no reason for this other then preference.  For a lot of my projects I gank portions of Bootstrap (especially the mixins and grid) so I have a tendency to use LESS.

You can check out the LESS website for more information and a guide to the language itself.

Installing LESS with WordPress

The first step in using LESS is to install the LESS compiler.  Though there is an option to use a javascript file to compile LESS at runtime I do not recommend it for performance reasons.  Instead, there is a LESS compiler written for Node that does the job.  So, to get this running we will need to install Node and the LESS node module.  Don't worry, it's simple and unobtrusive. If you are using an Ubuntu flavored linux VPS the following code should install both of these items.

sudo apt-add-repository ppa:chris-lea/node.js -y && sudo apt-get update && sudo apt-get install nodejs -y && sudo aptitude install npm -y && sudo npm install -g less

Basically, what we are doing here is adding the Node repository, installing Node, installing the Node Package Manager (npm), and then globally installing LESS. If you are running a different version of Linux for your server then you can Google how to install the LESS compiler.  It's not hard and once you do it you can forget that you ever had to install Node in the first place.  Five minutes of work is really worth the trouble in the long run.

File Structure

First off, let's briefly look at the file structure to use when using LESS with WordPress.

/wp-content/themes/your-theme-name/
  /style.css
  /less/
    /style.less
    /normalize/
      normalize.less
    /mixins/
    /forms/
    /single/
    ...

I use something similar to the above when I am starting a new WordPress project. The style.css file will be compiled from the style.less file.

style.less

In my experience, it is best to keep style.less just for @imports.  using this paradigm forces you to create more clean and readable code and also keeps you (and me) from being lazy and shoving styles in the wrong place due to haste.  If you use a structure like this it is extremely simple to compile the LESS to the required style.css.  As an example the following Gist is a snippet from the style.less for this site. One item worth noting is that the Theme Name portion at the top is very important and part of how WordPress knows that your theme exists.  If you need a reference you can refer to the WordPress Theme Development page.

/* 
 * Theme Name: RyanFrankel.com
 */

@import "variables.less";
@import "bootstrap/mixins.less";
@import "bootstrap/normalize.less";

// Bootstrap Core CSS
@import "bootstrap/scaffolding.less";
@import "bootstrap/type.less";
@import "bootstrap/grid.less";
@import "bootstrap/buttons.less";

// Utilities
@import "bootstrap/utilities.less";
@import "bootstrap/responsive-utilities.less";

/* MIXINS */
@import "mixins/tab-size/tab-size.less";

/* TYPE */
@import "type/type.less";

/* FORMS */
@import "forms/forms.less";

/* HEADER */
@import "header/header.less";

/* FOOTER */
@import "footer/footer.less";

/* SEARCH */
@import "search/search.less";

Other Files

Once you have your style.less going it is really simple to add more styles to your site.  For example, most sites these days use some sort of normalization CSS to aid in cross browser compatibility.  If you wanted to add this file you simply add an import to the style.less file, add the directory, and then add the CSS to normalize.less.  Since LESS is backwards compatible with CSS you wil never have an issue with cutting and pasting libraries of CSS code if you need to.  I do recommend learning how to use LESS though because the syntax is much more readable and maintainable then pure CSS.

Compiling your style.less

Once you have your basic file structure set up it comes time to compile your style.less into style.css.  This style.css file will have all of your styles in it.  I do not recommend compressing the style.css with the LESS compiler.  Instead use W3 Total Cache to minify ALL of the sites CSS (including plugin CSS) into one big minified CSS file. To compile our style.less you should go to the command line, go into your themes directory, and then run the following command.

$ cd /wp-content/themes/your-theme-name/
$ lessc ./less/style.less > style.css

Uh, yeah, that's it.  You will find that you have a new style.css and your theme shows in the WordPress Admin area.

Speeding Up the Compilation Step

After a while, you will grow a little tired of compiling the LESS all of the time.  There are a few ways to do this automatically and I encourage you to check out Grunt and Gulp to help.  Also, SASS has a companion library that does this too. For now though, we will simply create an alias so we can do with with just a few key strokes.  I use 'rfless' as my command alias on this site, you can use whatever you can remember.  Open you ~/.bashrc (assuming you are using bash) in your favorite editor and at the bottom add something like the following:

alias rfless='cd /your-wordpress-directory/wp-contnt/themes/your-theme-name/ && lessc less/style.less > style.css'

Now save the file and reload your bashrc with or log out and log back in. OK, you are all set.  When you want to rebuild your style.css file all you have to do is:

$ rfless

Of course, you will use whatever command you created and not 'rfless'.  If you want to though I would be flattered.

Conclusion

This might seem like a lot but once you have done this process once or twice it is very straightforward.  It will save you tens or hundreds of hours during your workdays and all of the people that ever look at your code will thank you.  I highly recommend this if you aren't already using some sort of CSS precompiler with WordPress. Feel free to leave any questions below.


Leave a Reply

Your email address will not be published.


    • I just realized that I misread your comment =).

      The reason I don’t compress the LESS file with the -x option is that it will remove your page header and the theme will no longer work. The comment with /* THEME NAME: xxx */ is important and should not be removed. Since I use a final step using W3TC to combine and minify my static resources I don’t have to worry about the style.css not being compressed.

    • Sure.

      Basically, LESS has an option to include a JS file that will compress your LESS on a page request. The problem with this is that on every page load your LESS gets rebuilt and you pay a penalty (in terms of page load time) for this. It is all done client-side and can be useful for development purposes but not for deployment.

      Another downside is that the built CSS can not be included in your minified CSS file. It is much better to precompile the LESS and minify it along with all of your other CSS to reduce the number of HTTP requests your page makes.

      Personally, I like using the native (built by LESS) node compiler. There is a PHP library that is a clone of this and you could use that but I always shy away from that sort of thing because of long term updates and maintenance.

      You can check out http://lesscss.org/#client-side-usage to see that they recommend the same thing.