The WP LESS plugin offers a good opportunity to integrate LESS in your WordPress theme. How does this fit JBST? First i try to set the requirements.
JBST is based on Twitter’s Bootstrap, so we will have the option to update Twitter’s Bootstrap without changing any custom setting or extensions. JBST WordPress Theme can be use in two ways. In the first place someone can use JBST direct. In this case the website will be styled by using the build in customizer.
In the second option a child theme will be create. Customizing and styling will be done with the use of filters and hooks.
Updating of Twitter’s Bootstrap should be possible in both cases.
To find a suitable strategy i read Twitter Bootstrap Customization Best Practices. The solution of @sam seems to fit on the first sight. From How can I customize Twitter Bootstrap’s CSS using LESSCSS variables? i could construct a file structure.
Basically theme should compile customization.less which include Bootstrap. By default it always includes the bundled Bootstrap version. Compromise here will be the hard code path to Bootstrap’s LESS files:
@import ../../jamedobootstrapstarttheme/less/bootstrap.less
//custom Less code here
After this other CSS of JBST should also have to migrate to LESS. I will define a master and an custom file for this task too. So the final directory structure will look like:
/assets/bootstrap/less/*
/assets/jbst/less/*
/assets/less/boostrapcustomization.less
/assets/less/jbstcustomization.less
The plugin mentioned above should enqueue boostrapcustomization.less and jbstcustomization.less from the child theme folder if exists in the case of child theming or from the JBST parent theme in all other cases. Core files will always be imported from the parent theme. Updating Bootstrap won’t effect customizations.
So far the theoretical part. What did we find in practical? The first issue we found. The plugin didn’t support Twitter’s Bootstrap > 3.0.0. I fixed this by create a fork of the plugin which replies on less.php instead of LESSPHP. If your are interested you can download this code here.
Second issue was JBST doesn’t use the original Bootstrap files. Different versions of navbar.less are compiled and include based of the grid and navbar breakpoint (grid-float-breakpoint) settings in the customizer. To fix this we should save the customizer setting direct in some .less file (overriding bootstrap/variables.less).
Third JBST provides a custom CSS editor, this editor should be replace by a LESS editor.
The information in this blog will be used to migrate JBST to LESS. First steps are made already.