Integrate LESS in JBST WordPress Theme

Posted on: by

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.

9 Responses to “Integrate LESS in JBST WordPress Theme”

  1. mael

    Hi !
    I attended to use a child theme, using your boilerplate (https://github.com/bassjobsen/Boilerplate-JBST-Child-Theme), but after activation I get that warning :
    Warning: filemtime(): stat failed for /homepages/37/d502948212/htdocs/eclats/wp-content/themes/eclats/library/assets/less/bootstrap.less in /homepages/37/d502948212/htdocs/eclats/wp-content/themes/jamedo-bootstrap-start-theme/vendor/wp-lesscss/lib/Stylesheet.class.php on line 92
    I renamed it in “eclats”. It seems there is a problem in parent theme’s naming :
    jamedo-bootstrap-start-theme-master
    or
    jamedo-bootstrap-start-theme
    What do you think ?

    Thanks

    Reply

    • admin

      Hi,

      Thanks for mention this issue. I will look to it asap.
      I think there will be a problem with the LESS integration and the Child Theme Boilerplate.
      Feel free to post your issues on Github too.

      Best regards,

      Bass

      Reply

        • admin

          Hi Mael, thanks. I have fixed the child theme problem, see: https://github.com/bassjobsen/jamedo-bootstrap-start-theme/commit/ca8110749fc5c981280a0390cfabce31f6274539

          And yes, indeed when your parent theme is in themes/jamedo-bootstrap-start-theme-masters you will have to rename it or change the link in your childtheme/style.css

          I’m working on a new and optional LESS integration, but it is not finished yet. I will use a variant of https://github.com/bassjobsen/custom-bootstrap-editor.

          Looking forward to your issues.

          Reply

          • mael

            Ok, I started with the master theme, and I would like to not lose the work already done. Let say I want to copy the CSS or LESS of the master in the child theme. I could paste it in the custom-styles.css.
            I can’t figure out where to find such code :p

          • admin

            Hi Mael,

            Most setting are done in the theme customizer at the moment. Do you want to copy this settings to your child theme?
            If yes, unfortunately WP doesn’t has an option to do this (AFAIK).

            You could do this:

            • install the child theme (for example “Boilerplate-JBST-Child-Theme”)
            • find the option by sql: SELECT * FROM `wp_options` WHERE `option_name` like '%theme_mods_%'
            • Copy the content of option_value of the parent theme to option_value of the child theme

            Let me know if this helps you.

  2. mael

    Ok It works.
    I will use the master theme for this project, I went too far now 😉
    I am experimented in HTML/CSS, but a newcomer with Bootstrap and LESS, your theme is the cleaner I found, perfect for starting ! Thank you for sharing !

    Reply

Leave a Reply

(will not be published)