Installing Bootstrap on your wordpress child theme

Bootstrap is the twitter framework made for everyone.  It’s a framework that allows your site to have responsive CSS and look GREAT on mobile and tablets.

Installing Bootstrap into your wordpress child theme it’s a breeze. Just do the following steps

1. Download Bootstrap

You can download it from the twitter github http://twitter.github.com/bootstrap/

2. Upload Bootstrap to your server

Upload the files to your Theme’s folder.  Your final result should look somewhat like this:

 MyTheme/
  ├── css/
  │   ├── bootstrap.css
  │   ├── bootstrap.min.css
  ├── js/
  │   ├── bootstrap.js
  │   ├── bootstrap.min.js
  ├── img/
  │   ├── glyphicons-halflings.png
  │   ├── glyphicons-halflings-white.png
  └── README.md

3. Include Bootstrap in your theme

This is done on the header of your theme.  If you still haven’t create a header.php file for your theme, follow these simple steps.

If you want WordPress to handle all the relative URLs you have to include the new lines with the following code:

<?php echo get_stylesheet_directory_uri(); ?>

This lets WordPress to always try to get the files from your current stylesheet url.  So that allows you to change, for example, your theme’s folder name and everything will continue to work as normal.

Open your header.php and include the following line inside the <head> tag

<link href="<?php echo get_stylesheet_directory_uri(); ?>/css/bootstrap.min.css" rel="stylesheet">

If you want your theme to be responsive, you also have to include the responsive css. just place a new line below the first one on the <head> like this:

<link href="<?php echo get_stylesheet_directory_uri(); ?>/css/bootstrap-responsive.css" rel="stylesheet">

Now include the following line inside the <body>, if it is possible, at the end of the tag.

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/bootstrap.min.js"></script>

 4. Test

Now that you have called your bootstrap files, run a small test on a page or a post.   Include a bootstrap class so you can see it in action.  Let’s include a blue button with hover effect:

<button class="btn btn-large btn-primary" type="button">Start learning</button>

Or try this image:

<img src="http://placehold.it/300x300" class="img-rounded">

With the magic of bootstrap you will get a pretty blue button and a rounded image, like the ones here:


8 thoughts on “Installing Bootstrap on your wordpress child theme

  1. Your post, Installing Bootstrap on your wordpress child theme, is really well written and insightful. Glad I found your website, warm regards!

  2. Thanks , I have recently been looking for information about this topic for a while and yours is the best I have discovered till now.

Leave a Reply