In a previous series of posts, we had the chance to build a Really Minimal theme for WordPress 3.5 and higher. In case you missed those posts, you will find a link to them at the end of this article. I recommend you get yourself familiar with them before reading on.

As you recall, the theme we built was indeed minimal and it missed in particular any kind of styling. The recent release of Bootstrap 3.0 by Twitter gives us the chance to style our theme and, as a bonus, to turn it into a responsive design.

What is Bootstrap 3.0?

In its own words, Bootstrap 3.0 is a “Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.” As such, it fits very well with WordPress! Bootstrap is all about creating functional and modern front-ends in a quick manner. Additionally, Bootstrap 3.0 is disigned around the mobile-first paradigm, which means the resulting site will be responsive and will display properly on any kind of portable device.

Getting Bootstrap 3.0

Bootstrap 3.0 can be downloaded from getbootstrap.com. Click on the large button that says DOWNLOAD BOOTSTRAP on the home page of the site.

The downloaded ZIP file contains a lot of files and folders, including Bootstrap’s source code and documentation. What we need is the content of the directories js, css and fonts inside the dist directory.

Duplicate your Really Minimal theme within wp-content/themes and rename its directory to really-bootstrap. Now copy the js, css and fonts folder from the Boostrap distribution inside the really-bootstrap theme folder. At this point the theme folder should look like this:

A small change to the header of the style.css file and we are ready to activate our new theme (which at this point is virtually identical to Really Minimal except for the name and the description).

Once you have edited style.css as above, open the WordPress dashboard, go to Appearance –> Themes and activate the new Really Bootstrap theme. We didn’t change screenshot.png, so the theme thumbnail will still say Really Minimal, but don’t worry, that is not fundamental for what follows.

Adding Bootstrap 3.0 support to the theme

Here is where we start to unleash the power of Bootstrap 3.0 to style our WordPress theme. Working with Bootstrap requires use to include in our site a reference to Bootstrap’s css and js files. The proper way to do it in WordPress is to use wp_enqueue_style and wp_enqueue_script from within functions.php. In particular, we need to create a new function that adds (or enqueues) the css style and the js script and then allow WordPress to call it at the right moment by adding a wp_enqueue_scripts action.

Open the functions.php file and add the following code after the registration of the sidebar:

For both the css and the js we have referenced, for performance reasons, the minified versions (min). We could have referenced also the human readable versions by omitting the min. This is advisable during the development phase, when you may want to read through Bootstrap’s styles and javascript more easily to learn how they work and do some troubleshooting.

By default, wp_enqueue_style adds the css to the site’s head section, which is indeed what we want. In order to be ready to customize Bootstrap’s styles later on, we also enqueue our style.css after bootstrap.min.css.

When it comes to including bootstrap.min.js on the other hand, we need it to appear just before the closing of the body tag. This can be obtained by specifying the argument true inside the wp_enqueue_script function.

At this point our theme is almost ready to work with Bootstrap 3.0. We need just one more little step.

Open header.php and, just after the title tag, add the following meta line. This is necessary to make the mobile-first behavior of Bootstrap to work properly.

Ready to style a-la-Bootstrap!

Believe it or not, with these few changes our site can now be styled using Bootstrap 3.0! Actually, even without any further change, will already look like the standard Bootstrap.

Explaining in details how Bootstrap styling works is beyond the scope of this article, you can refer to the documentation on the getbootstrap.com site to learn the details. Here we will limit ourselves to using Bootstrap’s powerful responsive column system to style our site. We will then show how to customize a particular of the appearance through some custom css.

Let’s start by arranging the main content and the sidebar onto a responsive 12 columns system, with the main body taking 8 columns on the left and the sidebar taking 4 columns on the right. The site header, as well as the footer, will span all 12 columns.

First, let’s open header.php and add a div with class=”row” around the blog title and tagline (aka description). By default, the class “row” in Bootstrap makes the content span the entire range of columns in the grid (which is always a 12 columns one). Here is how the modified header.php looks like.

You will also note that we have added a container class to the body tag. This is another Bootstrap feature that adds some nice padding around the content. If we don’t add it, there will be no padding on the left and on the right and the content of the site will reach the frame of the browser window.

Next, we need to do something similar for footer.php.

We have added also in this case a div with the class=”row” around its content.

Last but not least, we need to define the grid columns for our content and side bar. Let’s open index.php and modify it as follows:

We have added another div with class=”row” around the whole content and side bar. This tells Bootstrap that they should be placed inside the same row within the grid. We have also moved the code to generate the sidebar just before get_footer as we want the sidebar to float to the right of the content.

Then we have wrapped the dynamically generated content within a div with class=”col-md-8″ and the dynamically generated sidebar in a div with class=”col-md-4″. This makes the content span 8 columns of the grid and the sidebar span 4 columns, for a total of 12.

This is it, well done! Now save everything and have a test drive of your new WordPress site powered by Bootstrap 3.0! Try to shrink the horizontal size of the browser window to see the responsive behavior. Below a certain width the side bar will move automatically below the content. Cool, isn’t it?

The whole site has also the typical flat look of Bootstrap 3.0, but it doesn’t have to be so. In the next step we will see how to add custom styles to it.

A final touch: custom styles with Bootstrap

Now that our theme is powered by Bootstrap, how do we style it further? The answer lies within the cascading property of css style sheets. We have already included our style.css, even though at the moment is totally empty (except for its header).

Let’s suppose we want to remove the annoying bullet from the widget titles.

Using Firebug or another inspector we recognize that the bullet style comes from the class “widget”. To remove it, let’s open our style.css and add to it the following code:

Save, reload et voila’! The bullet is gone.

Exactly in the same way we can override any of the default aspects of Bootstrap or WordPress themes. Just identify the class corresponding to what you want to modify and add an override for it to style.css.

Well, I hope you have enjoyed this article. If so, please let me know by leaving a comment below. I am thinking to write other posts covering, for example, how to add Bootstrap navigation bars and more to our WordPress theme.

Till next time!

Previous posts: A Really Minimal Theme for WordPress 3.5+

Part 1

Part 2

Part 3

Part 4