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. Once it’s activated, visit your site and you should see something like this.
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. You should see WP Bootstrap listed as one of the themes.Ĭlick Activate under the WP Bootstrap theme to set it as the current theme for the site. Login to the admin area and go to Appearances > Theme. We’re now ready to go into the admin area and install our new theme. Your folder structure should now look like this: This image needs to be 300 x 225 px and named “screenshot.png” You can use this image or create your own. 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 simple theme was built using the example Bootstrap theme "Basic marketing site" found on the Bootstrap web site License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
Once you have created a style.css file at the same level as your index.php file, add this comment to the top.ĭescription: A demo theme built to accompany the Treehouse blog post How to Build a WordPress Theme with Bootstrap. 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. In the same folder as your index.php page create a new file named style.css. It uses this comment to get all of the meta information about your theme.
WordPress requires a specially formatted comment to appear at the top of the style.css page. Now that we have a static HTML page, we’re going to move on to creating the main CSS page.
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. 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. Inside of that folder create a new file named index.php.
Once you navigate to that folder create a new folder called “wpbootstrap.” Inside of that folder paste in the bootstrap folder. Once you have these things ready, open the directory with all your WordPress files and navigate to wp-content > themes. * 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. For this demo we will build out templates for the following pages and functionality:īefore we get started there are a few things you will need to do: The theme we will build is based on the Basic marketing site example you can find over on the Bootstrap examples page. However, we do assume that you are comfortable doing things like adding and editing posts in the admin area or installing plugins. You don’t have to have built a theme from scratch before to successfully follow along. Bootstrap is a responsive framework for building web sites and applications, and it’s a great starting point for building a responsive WordPress theme.Ĭheck out Zac’s other WordPress courses and enjoy a free, two-week trial of Treehouse. In this tutorial, we will learn how to make our own responsive WordPress theme using Bootstrap.