Using Bootstrap in Wordpress Admin Panel
Bootstrap is a handy tool and I use it a lot. I decided to use it with a WordPress plugin I am developing but when I included bootstrap’s css file in my plugin page it blew up the wordpress admin panel’s design. Thus started my journey of hacks to get it working. Here is how it’s done…
This is what my plugin folder looks like:
- Stylesheets (and a less css file as you will soon find out) live in the “css” folder.
- Bootstrap fonts in the “fonts” folder.
In your plugin file/installer/whatever you probably have a line which was loading the bootstrap css in the html head element…
wp_enqueue_style('admin_css_bootstrap', plugins_url('/myplugin/css/bootstrap.min.css'), false, '1.0.0', 'all');
Create a script called bootstrap-hack.js and load it with your plugin.
wp_enqueue_script('admin_js_bootstrap_hack', plugins_url('/myplugin/scripts/bootstrap-hack.js'), false, '1.0.0', false);
The content of that file is this:
The content of bootstrap-wrapper.less is this:
What this does is load the bootstrap css file as LESS and then outputs it with all of the styles wrapped with the “.bootstrap-wrapper” class. This means you have to add a div that wraps your content so that the bootstrap styles will be available to it. It will look something like this:
Now back to bootstrap-hack.js… It’s loading less.js file so download and include it in your scripts folder.
Make sure you load any stylesheets that override bootstrap styles in the same way bootstrap’s CSS is loaded afterwards. You don’t have load the stylesheet using less – we just did that because we needed to wrap bootstrap’s styles with another class so that they won’t conflict with wordpress’ styles. Don’t forget that your overrides must be prefixed with .bootstrap-wrapper now as well.