Migrating Your WordPress Theme from a Foundation Design to Bootstrap

I build all of my websites on a responsive framework. Originally, I started using the Foundation framework by ZURB. But recently, I experimented with Bootstrap and decided to switch. However, this proposed a few problems for me.

In the version of Foundation I was using (an older version), the column classes looked like this:

<div class="three columns"></div>

This would create a div that is three columns wide (built on a 12-column grid). But the Bootstrap equivalent looks like this:

<div class="col-md-3"></div>

There are other differences as well. For example, an informational alert box on Foundation was made like this:

<div class="alert-box">Alert text here</div>

But on Bootstrap:

<div class="alert alert-info">Alert text here</div>

None of my old code was going to work!

By just updating the theme, a lot of my design code would break. A great example is the images in my Stacking the Shelves posts. Check out the latest one as an example. All the images are in a column, with four on each row (which means they’re using the “three columns” div). But with my new theme, the <div class="three columns"> code would no longer work, so the images would not be in neat columns.

So the big question was: how can I fix this without manually editing every single post?

Run a replace query on the database

I basically did the equivalent of a “find and replace” on the posts table in the database. To do this, you need to login to phpMyAdmin (usually accessible through your web host client area), click on your database, then click on the “SQL” tab at the top. Then this is the SQL query you want to run:

update wp_posts set post_content = replace(post_content, '<div class="three columns', '<div class="col-md-3')

Note: If you use a different prefix on your tables, you’ll have to edit wp_posts appropriately.

In this query, I’m basically telling it to replace all instances of <div class="three columns with <div class="col-md-3 in the wp_posts table. I left off the ending quote and bracket in case I had other class names inside the divs.

Make sure you’re VERY careful with what you do here. For example, make sure all your brackets and quotations line up properly in both the “find” and “replace”. The last thing you want to do is replace all instances of <div class="three columns"> with <div class="col-md-3 (notice the ending "> in the first one, which isn’t in the second one).

You can repeat this process for any other changes. Another example for one I did is alert boxes, using the following query:

update wp_posts set post_content = replace(post_content, '<div class="alert-box alert">', '<div class="alert alert-danger">')

This has other uses too!

Other examples of using a “find and replace” query might be:

• Updating all the URLs in your posts if you change your domain name.
• Updating all instances of your old blog name if you change it.
• Remove/change HTML code.

Have you ever had old code break because you changed your design?