Migrate Bootstrap 2.x to 3.x in WP posts

This isn’t strictly a Roots question, but it since it’s related to WP and Bootstrap and may be of interest to others, I hope it’s ok to ask this here. If not, please delete.

I’m wanting to update my blog’s theme to the latest version of Roots which uses the latest Bootstrap. Unfortunately I have a lot of posts that use Boostrap 2 code (such as the img-polaroid and the Bootstrap 2 grid). I’m referring to code entered in the editor- not in the theme itself. Now, I know this probably wasn’t best practice, and I should have used a different method. However, is there an easy way to migrate the code in the posts to Bootstrap 3? I could do it manually using find and replace, but I wondered if a solution already existed?

On another note, what do people recommend to use Bootstrap code in the editor in WP? I currently use the WP plugin Bootstrap 3 Shortcodes but how do I handle classes in images such as img-polaroid or img-circle?


Not that I am aware of… You may be able to do some database manipulation but that is out of scope for here I think. If it helps, there is a migration guide here from bootstrap.

As far as using stuff like that in posts, Generally its best IMO to make classes that extend those bootstrap styles and use those instead, that way in the future if anything changes it would be easy for you to adapt because you control the class names.

Thanks, I thought that might be the case. I’m still fairly new to LESS, but I’ll definitely be trying to extend bootstrap files like you say in future. Unfortunately I’m now in the situation of having to migrate the hard way.

I’m sure you’re aware of this at this point, but one thing I usually don’t recommend is hardcoding styles (divs, etc) into an editor. I would recommend building your own plugin with just the shortcodes you need, if this is a custom theme. Some of those other plugins can get pretty bloated. That way, you could customize it to your needs, and just change the class names it outputs if Bootstrap changes.

I made a sample plugin so you could see how easy it is: https://github.com/JulienMelissas/simple-bs-shortcodes feel free to fork that and modify to your needs :wink:

PS (I recommend the Search Regex plugin for Search/Replace if you have to end up doing that)

1 Like