Chapter 3. Bootstrappin' a WordPress Theme

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:

  • Integrate our customized LESS and JavaScript files with the Roots theme
  • Customize the theme template files to deliver the markup we need for our home page carousel and column content
  • Utilize the powerful and advanced custom fields plugin to provide custom fields for our carousel items and home page columns
  • Create a home page template file that publishes our custom fields into our desired home page layout

Downloading and renaming the Roots theme

Let's get started by downloading the Roots theme:

  1. Navigate to the Roots theme home page at http://roots.io/.

    You might take some time to familiarize yourself with the resources here. (It's a great and growing development community.)

  2. Proceed on to the GitHub project by clicking on the GitHub link. The direct URL is https://github.com/roots/roots.
    Downloading and renaming the Roots theme
  3. Download the ZIP file.
  4. Extract it.
    Downloading and renaming the Roots theme
  5. Rename the extracted folder to your desired theme name as shown in the following screenshot:
    Downloading and renaming the Roots theme
  6. Navigate inside the main theme folder to the style.css file as shown in the following screenshot, and open it in your editor:
    Downloading and renaming the Roots theme
  7. Once you've opened the file, you'll notice that it contains no actual styles. Site styles are provided by a stylesheet 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.
  8. Change the comments to reflect your new theme information. Here's what I've done with some hints for you:
    /*
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]
*/
  9. Save the file.
  10. Now let's add a custom screenshot so that we can recognize the theme in the WordPress Dashboard.
  11. Grab a screenshot from our results in Chapter 2, Bootstrappin' Your Portfolio. (I've provided one in the 03_Code_BEGIN exercise files folder.)
  12. Replace the default Roots screenshot with our new custom screenshot.

We now have our own copy of the Roots theme set up.

Let's install it!

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset