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.
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.
.css format, but instead as
If you just enqueue
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.
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.
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