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 Comments Add yours

  1. claudicacau says:

    good article; i will share with the many friends i can. thank you for posting.

  2. Georseshoff says:

    Хочу заказать рекламу у вас, куда писать?

  3. Daron says:

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

  4. nike schuhe sneakers says:

    Want a particular account statement within your valued at, count number your pals.

  5. Toester says:

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

  6. memeil says:

    thanks for the info, appreciated it. it was so well formatted.

  7. Ahmed says:

    not working on bootstrap 3

  8. Fahad Rafiq says:

    There are many ways to import CSS files into a WordPress theme, but many theme developers are not aware of best practices to import CSS files into WordPress themes.
    The wp_enqueue_style() is a WordPress function that calls in the stylesheets and eliminates calling in duplicate CSS files of plugins and themes.

    Read how to do that here: http://www.cloudways.com/blog/import-bootstrap-css-wordpress/

Leave a Reply