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:
- Add style.less to your theme’s root directory
- Add theme support to the after_setup_theme hook:
[php light=”true”]add_theme_support( ‘less’, array( ‘enable’ => true ) );[/php]
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:
[php]add_theme_support( ‘less’, array(
‘enable’ => true,
‘develop’ => true,
‘watch’ => true
) );[/php]
Less theme support in production would us the minify option:
[php]add_theme_support( ‘less’, array(
‘minify’ => true
) );[/php]
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.
Thanks for the plug! Also, imagining you typing my name and thinking “How the hell do you pronounce that?” made me chuckle. :D