1

For days I've been looking all over the internet for a way to dynamically create a less file, into which I would pass color and font variables set inside the wordpress theme customizer api. The closest thing I came up with is a way to insert these variables into style.css.php file dynamically, which is then embedded as css, thanks to this css-tricks article. I created a php file into which I wrote this code:

<?php
$absolute_path = explode('wp-content', $_SERVER['SCRIPT_FILENAME']);
$wp_load = $absolute_path[0] . 'wp-load.php';
require_once($wp_load);

$dark_red = get_option('color-1');
$light_red = get_option('color-2');
$white = get_option('color-3');
$dark_grey = get_option('color-4');
$light_grey = get_option('color-5');

header('Content-type: text/css');
header('Cache-control: must-revalidate');
?>
body{
    font-family: <?php echo get_theme_mod( 'theme_font' ); ?>;
}
header{
    background-color: <?php echo $dark_red ?>;
}
etc.

Which works when it is embeded as css, however when I try to @import "style.css.php"; into bootstrap.less, right below the @import "variables.less"; to override the bootstrap variables, prepros can't recompile the css file because of unrecognized input, and when I activate lessphp in my functions.php it gives me this error:

Fatal error: Uncaught exception 'Less_Exception_Chunk' with message 'ParseError: Unexpected input in custom-styles.css.php on line 1, column 0 1| @font-family-sans-serif: <?php echo get_theme_mod( 'theme_font' ); ?>;' in C:\xampp\htdocs\inicijativa\wp-content\themes\liberter-less\less\lib\Less\Parser.php:535 Stack trace: #0 C:\xampp\htdocs\inicijativa\wp-content\themes\liberter-less\less\lib\Less\Parser.php(343): Less_Parser->GetRules('C:/xampp/htdocs...') #1 C:\xampp\htdocs\inicijativa\wp-content\themes\liberter-less\less\lib\Less\Tree\Import.php(277): Less_Parser->parseFile('C:/xampp/htdocs...', '', true) #2 C:\xampp\htdocs\inicijativa\wp-content\themes\liberter-less\less\lib\Less\Tree\Import.php(193): Less_Tree_Import->ParseImport('C:/xampp/htdocs...', '', Object(Less_Environment)) #3 C:\xampp\htdocs\inicijativa\wp-content\themes\liberter-less\less\lib\Less\Tree\Ruleset.php(248): Less_Tree_Import->compile(Object(Less_Environment)) #4 C:\xampp\htdocs\inicijativa\wp-content\themes\liberter-less\less\lib\Less\Tree\Rulese in C:\xampp\htdocs\inicijativa\wp-content\themes\liberter-less\less\lib\Less\Parser.php on line 535

Is there a way to insert php variables generated by the theme customizer into less?

Edit: I seem to be way in over my head here. I looked at the lessphp documentation and I just don't seem to get it.

this is how I set the lessphp function in my functions.php

    //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;
    $less->setVariables(array(
      "font" => get_theme_mod( 'theme_font' )
    ));
    // 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');
}

Now I need to @import file with the variables set by the theme customizer, below the variables.less in bootstrap.less to override the default bootstrap variables, and then I need to recompile the style.css

So, how can I pass something like this @font-family-sans-serif: <?php echo get_theme_mod( 'theme_font' ); ?>; in a way that will work with lessphp?

Goran Tesic
  • 719
  • 1
  • 13
  • 28
  • unless less does an http request to fetch that `style.css.php`, it's going to get the raw un-executed code... – Marc B Jun 29 '15 at 16:17
  • I saw the lessphp documentation and I just don't seem to get it. How do I pass something like @font-family-sans-serif: ; into less? – Goran Tesic Jun 29 '15 at 16:33

0 Answers0