Wordpress Admin + Plugin Development + Less + Bootstrap = Awesome

Bootstrap can not be added directly to the admin of a plugin, but you can wrap your plugin in a container and compile the Bootstrap CSS to use it as a wrapper.

I do my compiling using SimpLess

In the past you could do this using SimpLess directly (my-own-bootstrap.less).

.bootstrap-wrapper {
	@import (less) url( 'bootstrap.css' );
}

.bootstrap-wrapper {

@import (less) url( 'bootstrap.css' );

}

This fails with the latest version of Bootstrap. But you can just paste the Bootstrap CSS into the LESS file and compile it that way.

.bootstrap-wrapper {
	// Paste Bootstrap CSS here
}

.bootstrap-wrapper {

// Paste Bootstrap CSS here

}

Run it through SimpLess and after that the new CSS can be enqueued in WordPress ! This also works nicely with themes from Bootswatch.

wp_enqueue_style( $this->plugin_slug .'-my-bootstrapstyle', plugins_url( 'css/my-bootstrapstyle.css', __FILE__ ), array(), $this->version );

1	wp_enqueue_style( $this->plugin_slug .'-my-bootstrapstyle', plugins_url( 'css/my-bootstrapstyle.css', __FILE__ ), array(), $this->version );

Enjoy!

WordPress Admin + Plugin Development + Less + Bootstrap = Awesome

Leave a Reply

Alexander