First time I'm asking a question here so I apologize in advance if I'm breaking any rules.
I'm trying to build a 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>
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');
}
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?
So to be clear, I want to be able to compile new style.css every time the settings are changed because bloating the head with ton of inline css to achieve something which can be done by changing 3-4 less variables seems like a massive overkill to me. I already integrated lessphp into the theme which seems to work when less files are updated manually, so now I only need to find a way to export customizer settings into an external less file, which will then trigger lessphp compiler and do the trick. I searched all over the web for a solution but to no avail.
Is there a way to save these customizer settings into an external file instead of posting them to head as inline css?
