Dynamically change variables

[matyushen]

Hello there,

I'm trying to combine wp-less with SMOF(https://github.com/sy4mil/Options-Framework) in my theme development.

SMOF uses variables that could be changed by users via admin options page. For example:

$of_options[] = array(  "name"            => "Background color",
                        "desc"      => "Set background color",
                        "id"              => "background_color",
                        "std"       => "#2C3E50",
                        "type"      => "color"
                        );

The following code is used in style.php and saved to css on the fly:

body {
background: <?php echo $data['background_color']; ?> <?php echo $background ?>;
}

It's kind of handy, but since all styles are written in less, wp-less is much more desirable.

Now, how can i use SMOF's variables here:

add_filter( 'less_vars', 'my_less_vars', 10, 2 );
function my_less_vars( $vars, $handle ) {
    // $handle is a reference to the handle used with wp_enqueue_style()
    $vars[ 'bg-color' ] = '#444444';
    return $vars;
}

Sorry if it's kind of stupid question, I'm new to wp & php.

Thanks!

[sheabunge]

In the code, bg-color will be the name of the LESS variable, and #444444 will be the value of that variable.

It's fairly easy to modify that for your needs:

function my_less_vars( $vars ) {

    // insert code to grab the values of $data and $background here

    $vars[ 'bg-color' ] = $data['background_color'];
    $vars['background'] = $background;
    return $vars;
}
add_filter( 'less_vars', 'my_less_vars' );

[matyushen]

That's cool, thanks, but that's obviously not all changes I need to make. Not sure if it's right place for this discussion. But would appreciate any help.

This code handles php to css conversation every time I change options in admin panel and hit save or reset.

<?php 
function generate_options_css($newdata) {
global $data;
$data = $newdata;
$css_dir = get_stylesheet_directory() . '/css/';
ob_start(); // Capture all output (output buffering)

require($css_dir . 'styles.php'); // Generate CSS

$css = ob_get_clean(); // Get generated CSS (output buffering)
file_put_contents($css_dir . 'options.css', $css, LOCK_EX); // Save it
}
?>

Now I can't figure out how to adjust it, so it would reload less vars instead.

[roborourke]

Hi, when you pass those values into less as soon they're changed in admin it causes it to recompile the CSS. Does that help? You'd need to extract the values from the options framework in functions.php using get_option() assuming that's how SMOF works...

[matyushen]

Hi, thank you for your answer. It seems that I cant even get it working as it is, without SMOF. Here is the code i use in functions.php:

<?php
require_once( 'wp-less/wp-less.php' );
if ( ! is_admin() )
    wp_enqueue_style( 'style', get_template_directory_uri() . '/library/less/style.less' );
add_editor_style( 'editor-style.less' );
add_filter( 'less_vars', 'my_less_vars', 10, 2 );
function my_less_vars( $vars, $handle ) {
    $vars[ 'main-color' ] = '#000000';
    return $vars;
}
?>

I use @main-color variable in my less styles. The page loads normally but no changes are applied. What I'm doing wrong?

[roborourke]

Can you paste in the less code and if possible the compiled CSS?

[matyushen]

Well, I now realize that this code doesn't save anything to style.css. Whar do i miss? Do i need to set a path to css folder somewhere? I've just delited style.css and re-saved the function.php and no new css file showed up.

[roborourke]

Ah right, the only folder you can rely on being writable in Wordpress is the wp-content/uploads folder so the compiled stylesheets are written to a folder called wp-less-cache in there.

Sorry should have explained that!

[matyushen]

Ok, i have that folder but it's empty. When saving changes to the code nothing appears in that folder.

[matyushen]

It's not empty, the style.css and style.css.cache appear when i reload the page. But here's another weird thing, when I change a @main-color it will appear in that style.css only after I manually delete the file and then reload the page.

[matyushen]

Sorry for taking your time and thank you for tying to help me!

[matyushen]

Hi there, I'm still experiencing that problem. Changes won't apply until i manually delete css file from wp-less-cache folder and reload the page. What could be the problem?

[rossedman]

This is happening to me as well with Advanced Custom Fields. Anybody find a fix?

[roborourke]

Possible filemtime() issue... PR #73 might fix it