How to Output WordPress Theme Customizer changes into .less file?

2 Views

I’m trying to build a wordpress theme with bootstrap 3 less.
I managed to setup wordpress customizer options for color changing to work by outputting css into theme header, the classic way, but I was wondering if there is a way to output these options into .less file and compile the style.css with something like lessphp compiler, which I managed to integrate into the theme and which seems to work when I manually update less files.

Right now i’m outputing css into head by placing this function into functions.php:

Read More
<?php 
//change colors
function le_libertaire_register_theme_customizer($wp_customize) {
    $colors = array();
    $colors[] = array(
      'slug' => 'header_text_color', 
      'default' => '#fff',
      'label' => __('Header Text Color', 'Le-libertaire')
    );
    $colors[] = array(
      'slug' => 'navbar_bg_color', 
      'default' => '#dc3023',
      'label' => __('Navbar BG Color', 'Le-libertaire')
    );

    foreach( $colors as $color ) {
      // SETTINGS
      $wp_customize->add_setting(
        $color['slug'], array(
          'default' => $color['default'],
          'type' => 'option', 
          'capability' => 
          'edit_theme_options'
        )
      );
      // CONTROLS
      $wp_customize->add_control(
        new WP_Customize_Color_Control(
          $wp_customize,
          $color['slug'], 
          array('label' => $color['label'], 
          'section' => 'colors',
          'settings' => $color['slug'])
        )
      );
    }
}
add_action('customize_register', 'le_libertaire_register_theme_customizer');

?>

and this code into my header.php: 

    <?php
$navbar_bg_color = get_option('navbar_bg_color');
$header_text_color = get_option('header_text_color');
?>
<style>
    .navbar{background: <?php echo $navbar_bg_color ?> !important; }
    .navbar-brand, .navbar-nav a{color: <?php echo $header_text_color ?> !important;}
</style>

Can anyone tell me if there is a way to output these variables into, lets say wp-customizer.less file which would be included into bootstrap.less via @import, so that the output code in wp-customizer.less is formated like this

@brand-primary: #dc3023;
@brand-success: #fff;
where color hex code would be replaced by variable from customizer output?

edit:
this is the function from functions.php which I’m using to integrate lessphp into wordpress: 

    //compile less
function autoCompileLess() {

    // include lessc.inc
    require_once( get_template_directory().'/less/lessc.inc.php' );

    // input and output location
    $inputFile = get_template_directory().'/less/bootstrap.less';
    $outputFile = get_template_directory().'/style.css';

    // load the cache
    $cacheFile = $inputFile.".cache";

    if (file_exists($cacheFile)) {
        $cache = unserialize(file_get_contents($cacheFile));
    } else {
        $cache = $inputFile;
    }

    $less = new lessc;
    // create a new cache object, and compile
    $newCache = $less->cachedCompile($cache);

    // output a LESS file, and cache file only if it has been modified since last compile
    if (!is_array($cache) || $newCache["updated"] > $cache["updated"]) {
        file_put_contents($cacheFile, serialize($newCache));
        file_put_contents($outputFile, $newCache['compiled']);
    }
}

if(is_admin()) {
    add_action('init', 'autoCompileLess');
}

Is there a way to pass the variables created by customizer into lessphp and output them into the file named wp-customizer.less?

Post Views: 2

Related posts