Twitter Bootstrap CSS Libraries now available in WordPress Admin

by Paul on April 4, 2012

We believe one of the coolest additions we’ve made to our WordPress Twitter Bootstrap plugin is one that was released with version 2.0.2.1 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 ‘divs‘.

Our solution: we took the latest Twitter Bootstrap CSS library and prefixed all defined styles with our own custom class name, namely:

.bootstrap-wpadmin

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.

For example:

<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:

  1. 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.
  2. 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 2.0.2.1+ 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.

Use the form below to join our Developer Channel

Do you need an automated CPanel web hosting backup script? There is that and more in the Developer Channel

{ 6 comments… read them below or add one }

Greg Robson July 10, 2012 at 10:10 pm

Great plugin, I was looking at having to do this myself to get my admin theme working. Also it might be worth noting that a jQuery UI theme in the same style as Bootstrap is available: http://addyosmani.github.com/jquery-ui-bootstrap/

Reply

Paul July 10, 2012 at 11:34 pm

cool Greg, thanks for the heads up on the jQuery UI … looks promising!
Glad you found the plugin useful for you and your site.

Thanks.
Paul.

Reply

Mel March 15, 2013 at 8:47 pm

I can’t quite seem to get my bootstrap tabs in my admin panel to play nicely… every time I click on a tab, it reloads the page instead of opening the tab. It seems like it’s because the bootstrap JS isn’t being included? Do you guys have any plans on streamlining adding in the bootstrap jQuery/JS functionality to the admin panel area?

Thanks! 🙂

Reply

Paul March 16, 2013 at 10:23 am

Hi Mel,

Actually currently it’s only including the Bootstrap CSS, not the javascript. We weren’t sure that the Javascript would work. I can make an update to the plugin for the next release to include the Javascript as well if you like.

Cheers,
Paul.

Reply

Larry May 21, 2013 at 10:35 pm

Paul,

That would be extremely awesome, having bootstrap JS behavior in wp plugins would allow for fast built easily manipulable plugins.

Reply

Kim April 11, 2014 at 9:24 am

I’m guessing you never got the bootstrap js library to play with the admin panel? Leastways, I can’t make it work.

Reply

Leave a Comment

Previous post:

Next post: