New Plugin Adds Less CSS Preprocessor to WordPress Themes

less-theme-support

Many WordPress developers opt to use the Less CSS preprocessor to speed up theme development. Its availability of variables, mixins, and functions allows you to do more with CSS and to do it more efficiently. It also makes it easy to compile and minify files for production use. However, the initial setup for adding Less to each theme is a somewhat time-consuming process.

Justin Kopepasah wrote a tutorial in the past for using LESS in a live WordPress theme, followed by one that automated the process by setting up the functionality as a Git submodule. Over time, he found that adding Less to each theme was becoming quite a chore, so he created a plugin to make the process easier for anyone.

Kopepasah’s Less Theme Support plugin radically simplifies the process of adding Less to your WordPress theme. It requires just two simple steps following activation:

  1. Add style.less to your theme’s root directory
  2. Add theme support to the after_setup_theme hook:
    add_theme_support( 'less', array( 'enable' => true ) );

Less Theme Support comes with four different options which change how it functions on development vs. production sites. All are boolean values defaulting to false:

  • enable – Enables Less and enqueues less.min.js on the front end.
  • develop – Enables development environment for Less and enqueues less-develop.js.
  • watch – Enables watch mode for Less and enqueues less-watch.js.
  • minify – Enables usage of a minified stylesheet (style.min.css) on the front end for all other visitors (best generated using lessc -x style.less > style.min.css).

These options give you quite a bit of flexibility. For example, during development you might configure your theme support with the enable, develop, and watch options:

add_theme_support( 'less', array(
    'enable'  => true,
    'develop' => true,
    'watch'  => true
) );

Less theme support in production would us the minify option:

add_theme_support( 'less', array(
 'minify' => true
) );

Using the Less Theme Support plugin provides a much cleaner and easier way to add Less to your theme. Download it from WordPress.org or via the project’s page on Github.

7 Comments


  1. Thanks for the plug! Also, imagining you typing my name and thinking “How the hell do you pronounce that?” made me chuckle. :D

    Report


      1. Maybe someday I’ll figure it out too. I’ve heard it pronounced and spelled different ways. :)

        Report


  2. FYI, this is another plugin (hosted on Github only) which auto parse .less file into .css without worrying anything https://github.com/sanchothefat/wp-less. Just install and enqueue .less file just like normal .css.

    I’ve been using it in my projects and feel it’s much easier to work with than the plugin introduced in this post.

    Report


  3. Sorry but, I still a bit confused about this, does it processes LESS styles automatically? So it transforms into CSS live? Does it compiles my CSS and then enqueues it on wordpress each time someone loads any page on my site? I don’t get it… help? Someone? (I guess its a noob question but please help me out here =/ )

    Report


    1. The plugin itself does not compile the style.less file automatically into style.css file. Compiling is safest using the command line (whether with a compiler or manually), otherwise problems may occur (depending on the version of Less used). For example, if I am were to use version 1.7.0 of Less.js and tried to compile these with a non-compatible version of LessPHP, some features may not exist and the compile will fail. I personally ran into this problem (quite a while ago) and found that the safest route is to compile Less.js from the command line, when I am ready for production.

      This plugin is made primarily for development, as it will not push the styles live until they are converted using the command line (e.g. when you are ready). The plugin enqueues the necessary JavaScript to convert the style.less file into styles within the browser.

      I use nearly all the features of Less.js (some of which do not exist in LessPHP) and this is why I prefer Less.js over LessPHP (also why I don’t use plugins like the one mentioned above).

      This plugin enables theme developers to develop with Less.js, then convert into CSS for production when ready.

      Report

Comments are closed.