Twitter Bootstrap in WordPress Editor

This questions isn’t 100% Root specific, but since it is related to WordPress and Twitter Bootstrap, and since I am sure many of you will have been in similar situations, I hope it is ok to ask this here.

Once handing over the management of the content to our clients on completion of the website are the any ways of making it easier for them to use Bootstrap’s components.

For example, I’ve recently completed a website which uses wells, buttons an collapsible components in the content of some pages and posts. This makes it very difficult for the client- because it’s easy to mess up if they don’t know HTML- and they’re going to find it difficult to add new wells/buttons/collapsible items.

I know Ben Word said a while back that there was going to be a Roots plugin that might help add Bootstrap elements to the editor. I’ve also seen a few WP plugins around that are supposed to do this. However, most of them use shortcodes which in my opinion make it more complicated for the client.

I’d like a simple way to add the following functionality to the editor. Is there a plugin that can help, or have any of you developed something similar to this for your clients:

  • wells
  • Glyphicons
  • buttons
  • image classes (rounded, circle etc)
  • small
  • tables
  • lists
  • collapse


The plugin that we started on was based on shortcodes too and then was going to have some TinyMCE buttons to insert the shortcodes. It fell victim to us not having much time lately.

I believe this is the best shortcode plugin out there:

Thanks, that looks pretty good. Maybe shortcodes are the way, and I suppose the client doesn’t need to know all of them. I’ve had to mark up a lot of collapsible items in the editable text across quite a few pages, and worried that the client is going to get muddled. Shortcodes will at least make it obvious which bits not to touch!

I generally set up these types of things with Advanced Custom Fields. That way, all they’re adding is generally content and images.

Tabs are not too difficult, you set up a repeater with a title and WYSIWYG content, and you set up the tab buttons as the title and the content as each tab.

The issues with this are - more time needed to set them up. It also becomes dependent on the page template or specific page. The other way you can set it up is with the Flexible Content plugin, it’s pretty cool but then you basically have to dedicate your theme to being very modular and re-usable throughout. Obviously this is good, but requires forethought, planning, and refactoring.

1 Like

Just like @kalenjohnson I use ACF for this. I’ve actually pulled it out into a little plugin I install on client sites. In the plugin I use ACF’s register_field_group to register the flexible content field and set up the HTML in a function which is hooked into an action called in the theme’s templates.
I install this plugin on all bootstrap WP sites and add the do_action calls where appropriate and it just works!