LESS not working in WordPress [closed]

Question

I agree with @Zlatev that you probably wouldn’t want to do this clientside. There are easier ways to include less.

There are plugins that allow you to do this. Even jetpack has less support.

If your goal is to include this in your theme you can use wp-less.

Just download that plugin and drop in somewhere in your theme and include it in your functions.php like this:

require get_template_directory() . '/inc/wp-less/bootstrap-for-theme.php';

Then enqueue your less like normal css:

function mytheme_enqueue_less_css() {
    wp_enqueue_style('official_flowershop-theme-style', get_template_directory_uri().'/css/less/theme.less');
}   
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_less_css' );

The plugin has lots of extra features you can use (see full list here):

function mytheme_less_setup() {

    define('WP_LESS_COMPILATION', 'deep');
    $less = WPLessPlugin::getInstance();
    $less->dispatch();

    // do stuff with its API like:
    $less->addVariable('bg_primary', '#A0D4A4');
    $less->addVariable('bg_secondary', '#474747');
    $less->addVariable('bg_light', '#f5f5f5');
    $less->addVariable('bg_body', '#ffffff');

    if (get_theme_mod('officialtheme_bg_primary') != '' ) {
        $less_color = get_theme_mod("officialtheme_bg_primary");
        $less->addVariable("bg_primary", "$less_color");
    }

    if (get_theme_mod('officialtheme_bg_secondary') != '' ) {
        $less_color = get_theme_mod("officialtheme_bg_secondary");
        $less->addVariable("bg_secondary", "$less_color");
    }

    if (get_theme_mod('officialtheme_bg_light') != '' ) {
        $less_color = get_theme_mod("officialtheme_bg_light");
        $less->addVariable("bg_light", "$less_color");
    }

    if (get_theme_mod('officialtheme_bg_body') != '' ) {
        $less_color = get_theme_mod("officialtheme_bg_body");
        $less->addVariable("bg_body", "$less_color");
    } // WP Less initialize and add variables

}
add_action( 'after_setup_theme', 'mytheme_less_setup' );

Caution:
While using less or sass/scss within a theme/plugin, as of now there aren’t any available plugin solutions I’m aware of that let you prefix your css. To me this is a dealbreaker since I can do all of this on my computer with a program like Prepros or Codekit.

However, you can do this clientside if you want pretty easily with prefix-free although that’s what we were previously trying to avoid so while it’s easy, it’s not necessarily a great solution.

Related Posts: