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:
<?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?