[Question] How do you push Bootstrap LESS variables into the compiled CSS?

[thednp]

I am looking into the files and cannot find this, perhaps I am not looking at the right files?

Please advise.
Thanks

[bassjobsen]

Hi @thednp,

Thanks for your question. You can enter these Bootstrap Less variables into the Less compiler:

Alternatively you can enter the Less code in assets/less/custom.less or better in the case of a child theme in less/custom.less. Note you have to recompile the Less code also after changing the Less files.

I think the most important rule to remind will be: customizer settings overwrite predefined settings and Less variables (in the compiler or less/custom.less) overwrite all other settings.

For instance if you edit @footer-bg-color:red; into the Less compiler, the footer becomes red always even when you set it to green in the customizer or predefined it. I understand this can be confusing because of the customizer shows not all Less colors.

Nevertheless, customization your child themes with Less will be very powerful. I add an example of Less customization of the navbar in the Child Theme instructions which you can download here: https://raw.github.com/bassjobsen/Boilerplate-JBST-Child-Theme/master/jbstchildtheming.pdf

Hope this helps?

[thednp]

Thanks so much for the reply! I really need to know how you push the customizer values into LESS.
I need to push colors, border-radius, etc, and I am using a different options framework. I am not going to use the customizer due to the lack of support for other functional fields.

[bassjobsen]

Hi @thednp,

Thanks you too. Could you give me some examples of thing you want to change and you can't now? Now i can give you thousands of example. Some other variables are not built-in maybe and i will do that a.s.a.p if you will need them.

JBST should compile all Bootstrap variables AND JBST Less variables. Bootstrap's Less variables can be found when visiting: http://getbootstrap.com/customize/ and JBST's Less variables are described on: https://github.com/bassjobsen/Boilerplate-JBST-Child-Theme. Please also download the JBST Child theming Guide that contains some Less examples too.

Skipping the customizer when building child themes seem to be a good idea. You will have to understand that some setting can't be done with Less. Less only handles styling, for instance the number of footer columns can't be set with Less. You can use the pre-defined settings (see: https://github.com/bassjobsen/Boilerplate-JBST-Child-Theme) to set things you can't set with Less.

To set the number of footer columns you can add the following code to your child theme's functions.php

remove_action('customize_register', 'jbst_customizer');
add_action('after_setup_theme','set_defaultoptions');
function set_defaultoptions() {
    if(!defined('footer_widgets_number'))define('footer_widgets_number',2);
}

But your question was about Less. I can give you an example. To style the navbar for http://fonts.jbst.eu/ i have add the following Less code to less/custom.less:

@navbar-default-link-color: white;
@navbar-default-link-hover-color: white;
@navbar-default-link-active-color:white;
@navbar-default-link-hover-bg: transparent;
@navbar-default-link-active-bg: black;

.navbar-default {
    background: url("@{stylesheet_directory_uri}/assets/images/trans-bg.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    .navbar-nav > li > a {
    color: #FFFFFF;
    font: 18px 'calibrib',Helvetica,sans-serif;
    text-transform: uppercase;
    padding: 15px 35px;
    }
    .container-fluid {
    &:extend(.container);
    }
}
.navbar-fixed-top {
    border-width: 0 0 1px;
    top: 10px;
    border-radius: 0;
}

[thednp]

Hi Bass.

I've been moving in circles in the past 2 weeks trying to figure out where to start with this LESS madness. Most resources point out here, the best (reliable) less php compiler for Wordpress.

My problem is that I use an options framework called Vafpress. I can call my values like this:

$brand_color = dnp_get_option('brand_color');

Here is how they actually look like in the back-end

Now. This framework can hook on install, on save options, on uninstall, my most concern is this

add_action('vp_option_after_ajax_save-dnp_option', 'my_generate_dynamic_css', 10, 1);

where this function my_generate_dynamic_css must contain all the bootstrap less and my own custom less.

I won't use on install and uninstall hooks since my theme will be shipped with a precompiled css with default variable values.

At this point I have included the plugin into my file and included into my functions.php

// Include Compiler
require 'inc/less-php/less-plugin.php';

So now I need to include another file to have the my_generate_dynamic_css function and I have no idea what this function should look like (how to set my own variable values), mostly because there are so many versions of less.php that I am 1000 percent confused.

Thank you for your help. I hope this makes some sense..

[bassjobsen]

Hi @thednp,

Thanks for your question. First let make some things clear. JBST already has a build in Less compiler. This compiler is build with the latest version of less.php. I will also point you to some recent change in JBST: To support WordPress Multisite (MS), see also http://codex.wordpress.org/Create_A_Network the compiled CSS is now saved inside the theme directory of the Child Theme. The Less compiler saves it's output into {child_theme}/wpless2css.css. If no child theme is used the output will be save to the root theme directory (/wpless2css.css). To use JBST Child theme with MS you will have to create a new child theme for every site and make the child only available for this site.

The above means you can build a child theme, compile the css and distribute that theme with the compiled CSS (no hook or actions needed). Currently JBST has some pre-definded settings, see: https://github.com/bassjobsen/Boilerplate-JBST-Child-Theme you can also download the Child theme Guide on that URL.

Now. This framework can hook on install, on save options, on uninstall, my most concern is this
add_action('vp_option_after_ajax_save-dnp_option', 'my_generate_dynamic_css', 10, 1);

I'm not familiar with Vafpress, but i will try to answer your question.
Should your function my_generate_dynamic_css echo the Less code? If you build a child theme, it should be possible to use something as shown in the following code:

function my_generate_dynamic_css { //import JBST Less code and Bootstrap's Less code echo '@import "'.get template directory().'/wpless2css/wpless2css.less";'; echo '@brand-primary:' . dnp_get_option('brand_color'). ';'; }

I'm not sure Vafpress has a built-in compiler too?

I won't use on install and uninstall hooks since my theme will be shipped with a precompiled css with default variable values.

Please see above and read the Child Theming Guide

At this point I have included the plugin into my file and included into my functions.php
// Include Compiler
require 'inc/less-php/less-plugin.php';

JBST already includes a compiler.

So now I need to include another file to have the my_generate_dynamic_css function and I have no idea what this function should look like >(how to set my own variable values), mostly because there are so many versions of less.php that I am 1000 percent confused.
Thank you for your help. I hope this makes some sense..

Without Vafpress you will have at least two option to set @brand-primary (i think you mean that with brand_color, but you can set any Bootstrap Less variable, see: http://getbootstrap.com/customize/)

1. Use the compiler Dashboard > Appearance > Less Compiler
   enter in the text area for instance: "@brand-primary: green;" (without quotes) and press "Recompile Less"
2. Enter that line of code "@brand-primary: green;" (without quotes) into {childtheme}/less/custom.less and use the compiler from step 1) to recompile your CSS.

In the case you want to compile your Vafpress into JBST's you can do the following:

In your functions.php:

    add_filter( 'add_extra_less_code', 'lessify_vafpress');

function lessify_vafpress($lesscode)
{
    $lesscode .= '@brand-primary:' . dnp_get_option('brand_color'). ';';
    return $lesscode;
}

Notice you will still have to run the Less compiler after changing some settings / variables in vafpress.

Alternatively you can use JBST with the customizer (Appearance > Customize). Currently you can not set the @brand-primary their, but you can set many other (Bootstrap variables).
The customizer recompiles the CSS after save, which seems the same you try to do with your my_generate_dynamic_css.
JBST Less compiling requires WP file credentials, see also http://wordpress.stackexchange.com/questions/126424/using-wp-filesystem-in-plugins-to-store-customizer-settings

[thednp]

Thanks Bass for all your help, I managed to make things work on my setup, but I forgot to report back. Greetings 👍