Now let's turn our design from Chapter 2, Bootstrappin' Your Portfolio, into a WordPress theme. There are many Bootstrap-based themes that we could choose. We've taken care to integrate Bootstrap's powerful LESS styles and JavaScript plugins with the best practices found in the HTML5 Boilerplate. It will be to our advantage to use a theme that does the same.
The Roots theme has established itself as a starter theme that leverages the power of Bootstrap while hewing to the implementation of best practices at every turn, including the HTML5 Boilerplate among other excellent touches. We'll use this theme for this exercise.
In this chapter, we will perform the following:
Let's get started by downloading the Roots theme:
You might take some time to familiarize yourself with the resources here. (It's a great and growing development community.)
style.css
file as shown in the following screenshot, and open it in your editor:css
folder located inside the assets
folder, which is compiled by Bootstrap. We'll follow this approach as well. The style.css
file then serves primarily to name our theme, give appropriate credits, declare the license, and so on. So, let's do that./* Theme Name: Bootstrappin' Theme Theme URI: [your site URI] Description: A custom theme based on <a href="http://www.roots.io">the Roots Theme</a> Version: 1.0 Author: [Your Name Here] Author URI: [Your URL] License: [Supply your chosen license] License URI: [Supply license URI] */
03_Code_BEGIN
exercise files folder.)We now have our own copy of the Roots theme set up.
Let's install it!