1

I'm migrating a website to WordPress - it uses both Bootstrap and LESS. I found a snippet online for enabling Bootstrap and the outputted CSS via functions.php:

function theme_add_bootstrap() {
  wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/third_party/bootstrap/css/bootstrap.min.css' );
  wp_enqueue_style( 'style-css', get_template_directory_uri() . '/css/custom.css' );
  wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/third_party/bootstrap/js/bootstrap.min.js', array(), '3.0.0', true );
}

This worked successfully on its own. That said, it only accounts for the final CSS that's outputted by my LESS precompiler, which is a pain because I can't see my LESS style changes locally (using MAMP) unless I compile the CSS first.

I would like to have the CSS file used in production, and the LESS file used when I'm developing locally. I attempted to do this by adding the following functions underneath the Bootstrap function above:

function less_enqueue_scripts() {
  $current_user = wp_get_current_user();

  if ( $current_user--->ID == '1' )
    wp_enqueue_script( 'lesscss', get_stylesheet_directory_uri() . '/third_party/less-1.5.0.min.js' );
}

add_action( 'wp_enqueue_scripts', 'less_enqueue_scripts' );

function less_filter_stylesheet_uri( $stylesheet_uri, $stylesheet_dir_uri ) {
  $current_user = wp_get_current_user();

  if ( $current_user--->ID == '1' )
    $src = $stylesheet_dir_uri . '/css/custom.less';
  else
    $src = $stylesheet_dir_uri . '/css/custom.css';
  return $src;
}

add_filter( 'stylesheet_uri', 'less_filter_stylesheet_uri', 10, 2 );

But it's causing the site to break. I'm not sure if it's because the second statement in the Bootstrap function is interfering with these functions, or if another issue is the culprit. Would appreciate any insights.

1

You don't need to create additional functions, just re-use what you already have and tweak it a bit:

function theme_add_bootstrap() {
  wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/third_party/bootstrap/css/bootstrap.min.css' );
  wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/third_party/bootstrap/js/bootstrap.min.js', array(), '3.0.0', true );
  if (WP_ENV === 'development') {
    wp_enqueue_script( 'lesscss', get_stylesheet_directory_uri() . '/third_party/less-1.5.0.min.js' );
    wp_enqueue_style( 'style-less', get_template_directory_uri() . '/css/custom.less' );    
  } else {
    wp_enqueue_style( 'style-css', get_template_directory_uri() . '/css/custom.css' );
  }
}

Once you have that setup then just head to your wp-config.php on your development machine and add a line:

define('WP_ENV', 'development');

Assuming you don't have that line in your production wp-config.php then it should use CSS instead of LESS.

I adapted this method from the Roots theme which uses the same method for something similar.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.