We believe one of the coolest additions we’ve made to our WordPress Twitter Bootstrap plugin is one that was released with version 184.108.40.206 of the plugin.New: You can now use Twitter Bootstrap CSS within the WordPress Admin interface!
Why is this a big deal?
Because while WordPress is a fantastic platform in many respects, there is as-yet no standardised options interface for WordPress themes and plugins in the backend.
I’m not a huge fan of the boxy WordPress admin interface components. It works in some areas, like on the Dashboard, but for many plugins that use these dull grey boxes, it just doesn’t work.
So, we decided to put our money where our mouth is and use Twitter Bootstrap styling in the admin interface for the plugin itself.
And if we can make it available to ourselves, why not make it available to all?
There was just one little problem with that…
How to use Twitter Bootstrap CSS on the WordPress admin backend
If we were to include the Twitter Bootstrap CSS library in the WordPress backend, we’d quickly screw-up the styles for the whole admin interface.
Clearly this is not an option.
The only way around this is to make the Twitter Bootstrap CSS apply only to targeted areas, or ‘
Our solution: we took the latest Twitter Bootstrap CSS library and prefixed all defined styles with our own custom class name, namely:
So simply put, if you want to apply Twitter Bootstrap styles to your admin interface, you need to wrap it all up in a single
<div> with the class detailed above.
<div class="bootstrap-wpadmin"> All my original WordPress Admin plugin/theme interface code </div>
This allows you to be specific about the sections of your admin interface that take on the bootstrap styles while protecting the rest of the WordPress admin interface.
2 important points to note for those with concerns/questions:
- The backend bootstrap library is the latest bootstrap library available when the plugin version you’re currently using was released. This library doesn’t automatically update as it is a custom library that we created based off the original. Don’t worry, it is exactly the same as the original, but as outlined already, we just prefixed all the elements with our custom class.
- If you look at the source code of your WordPress Administration pages, you’ll find a CSS link called “
bootstrap-wpadmin-fixes.css“. This is because the CSS styles in the WordPress admin section contain some funky definitions that break the Twitter Bootstrap – we created a few manual fixes for this in a separate file.
And that’s it.
With version 220.127.116.11+ of the WordPress Twitter Bootstrap CSS plugin, you can now (as a plugin or theme developer) include the Bootstrap library in the WordPress backend and take full advantage of it to create a nice options/configuration interface for the users.