How to Build a Responsive WordPress Theme with Bootstrap

How to Build a Responsive WordPress Theme with Bootstrap Learn to code. Start your free trial with Treehouse. Home Subscribe Free trial Learn How to Build a Responsive WordPress Theme with Bootstrap Zac Gordon writes on October 10, 2012 1.1k 0 217 82 Share with your friends Your Name Your Email Recipient Email Enter a Message I read this article and found it very interesting, thought it might be something for you. The article is called How to Build a Responsive WordPress Theme with Bootstrap and is located at http://blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial. Captcha Submit In this tutorial, we will learn how to make our own responsive WordPress theme using Bootstrap.  Bootstrap is a responsive framework for building web sites and applications, and it’s a great starting point for building a responsive WordPress theme. Check out Zac’s other WordPress courses and enjoy a free, two-week trial of Treehouse. You don’t have to have built a theme from scratch before to successfully follow along. However, we do assume that you are comfortable doing things like adding and editing posts in the admin area or installing plugins. The theme we will build is based on the Basic marketing site example you can find over on the Bootstrap examples page . For this demo we will build out templates for the following pages and functionality: Custom homepage design About page Contact page News section with comments A widgetized sidebar Getting Started Before we get started there are a few things you will need to do: Install WordPress Download and Unzip Bootstrap Install the Theme Test Drive plugin* * You only need this plugin if you will be building the theme using a live site and don’t want people to see the new theme while you are developing it. Once you have these things ready, open the directory with all your WordPress files and navigate to wp-content > themes. Once you navigate to that folder create a new folder called “wpbootstrap.” Inside of that folder paste in the bootstrap folder. Inside of that folder create a new file named index.php. Now we’re going to copy the source code from the example basic marketing site and copy and paste it into the index.php file. Here is the source code you want to use. We’ve just linked to a txt version of the code since it is too long to embed in the post here. bootstrap-demo-source-code Now that we have a static HTML page, we’re going to move on to creating the main CSS page. WordPress requires a specially formatted comment to appear at the top of the style.css page. It uses this comment to get all of the meta information about your theme. In the same folder as your index.php page create a new file named style.css. WordPress requires a CSS file with the specific name style.css, so we can’t name it anything else or our theme won’t work. Once you have created a style.css file at the same level as your index.php file, add this comment to the top. /* Theme Name: WP Bootstrap Theme URI: http://teamtreehouse.com/wordpress-bootstrap-theme-tutorial Description: A demo theme built to accompany the Treehouse blog post <a href="http://teamtreehouse.com/wordpress-bootstrap-theme-tutorial">How to Build a WordPress Theme with Bootstrap</a>. Author: Zac Gordon Author URI: http://teamtreehouse.com/ Version: 1.0 Tags: responsive, white, bootstrap License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) License URI: http://creativecommons.org/licenses/by-sa/3.0/ This simple theme was built using the example Bootstrap theme "Basic marketing site" found on the Bootstrap web site http://twitter.github.com/bootstrap/examples/hero.html */ The last thing we need to do before we install and start building our new theme is to upload an image that will appear with our theme in the WordPress admin area. This image needs to be 300 x 225 px and named “screenshot.png” You can use this image or create your own. Your folder structure should now look like this: We’re now ready to go into the admin area and install our new theme. Login to the admin area and go to Appearances > Theme. You should see WP Bootstrap listed as one of the themes. Click Activate under the WP Bootstrap theme to set it as the current theme for the site. NOTE: If you are using a live site and do not want people to see this theme under development, make sure to install and activate Theme Test Drive plugin . Once it’s activated, visit your site and you should see something like this. It’s clear that none of the CSS is working on this site currently, so in the next step we’ll start the process of converting this static file into a working WordPress theme. Converting Bootstrap Files to WordPress Templates Most WordPress themes include the following files: index.php style.css header.php footer.php sidebar.php You will usually see a lot more than these files, but we’re going to start with these files and build from there. Go ahead create empty files for the header.php, footer.php, and sidebar.php. What we are going to do is take