HOWTO: The quick way to use Twitter Bootstrap with Genesis

I love the Genesis Framework by Studiopress. And I love the Twitter Bootstrap Framework for creating “standard” web interfaces. There is so much that both the Genesis and Bootstrap frameworks get right when it comes to ease of use and consistency. Because I love them so much, I decided to start using them together to get great looking front-end layouts that Studiopress doesn’t provide out-of-box. I like having solid looking tables, buttons, and forms, so Bootstrap is a great way to get that easily and quickly.

Here’s the quick and dirty way to use Genesis and Bootstap together.

1. Download a custom package of Bootstrap

One of the main reasons that I use the Bootstrap framework on WordPress sites with Genesis is to get some of the sleek looking front-end look to buttons, tables, forms, etc. I don’t normally use the entire Bootstrap framework with Genesis, usually just tables and buttons, but if you want the entire thing you can do that too.

Go grab a custom package of Bootstrap here. First click the Toggle All button on the Choose Components heading. Then simply choose the following from the list:

  • Tables
  • Forms
  • Buttons
  • Icons

This will get us a good start. Next, click the Toggle All button on the Select jQuery Plugins. We don’t need any of these for this exercise. Scroll to the bottom and click Customize and Download. Next, unzip the file you just downloaded.

2. Move the Bootstrap files to your WordPress installation

I’m not going to go in depth on how to access your WordPress installation via FTP (you can find that elsewhere). Drill down to your Studiopress theme folder. In my case here at DevBurner, I use the eleven40 theme so I would go to:

/wp-content/themes/eleven40

Next, upload the entire bootstrap folder you just unzipped to the root of your theme directory.

3. Include the Bootstrap CSS file in your site’s header

I like to do this with the Genesis Simple Hooks plugin (if you don’t have it, install it from here or simply search for it in your WordPress installation via the Plugins > Add New). Once the plugin is activated, in your WordPress backend go to Genesis > Simple Hooks. In the hook for wp_head fill it in with this:

<link rel="stylesheet" type="text/css" href="/wp-content/themes/eleven40/bootstrap/css/bootstrap.min.css" />
<script src="/wp-content/themes/eleven40/bootstrap/js/bootstrap.min.js"></script>

Remember to replace the name of your theme folder with the one that you are using.

4. Now you are done, so test it out

Because of the little bit you did above you get some great stuff.

Nice looking tables by using the table CSS class for your tables.

<table class="table">
  <tr>
    <th>Title</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>This is the title</td>
    <td>This is the description</td>
  </tr>
</table>

This markup creates this:

Title Description
This is the title This is the description

If you want to add a nice striped layout to your tables, just add the tabled-striped class to your table:

<table class="table table-striped">
  ...
</table>

You’ll get this:

Title Description
Great looking tables Are awesome
Great looking front-ends Are exciting for people to use
Great looking sites Are something people come back to again and again

You also get some great looking buttons by simply using the btn class on anchor links:

<a href="http://google.com" class="btn" >Go to Google</a>

The above yields:

Go to Google

You can also add some classes like btn btn-primary, btn btn-success, or btn btn-danger will give you:

Go to DevBurner

Go to Apple

Go to Microsoft

There is so much more you can do now with the power of the Genesis and Bootstrap frameworks combined. I highly suggest for you to check out the Bootstrap framework documentation if you want to utilize some of the great front-end enhancements it can bring to your website.

Comments

  1. says

    Hi Chris,

    I found this resource very helpful, since I was just looking to implement bootstrap charts on our website. However, I do have one quick question.

    Is there a reason that you are including the bootstrap.min.js script in your header?

    In the previous step you say to toggle off the jQuery plugins, but then you include the script in the next step.

    I followed all of the other steps, just included the css, and it seems to be working fine for the charts I am building.

    Thanks

    Anthony

    • Chris says

      Hey Anthony,

      Thanks for commenting.

      The reason that I use and include the JavaScript for Bootstrap is only if I want to use some of the JavaScript components to the framework (ie. modals, dropdowns, etc). If you are just using charts (do you mean tables?) then the CSS should be enough to include.

      Hope that helps!

  2. Frank says

    Hi Chris,

    great posting, (almost) exactly what I was looking for.

    not being a frontend guy who is using Genesis and playing with Bootstrap,
    do you see any way / hack / whatever how to include Bootstrap to a single WP posting only?
    I have hundreds of postings and want to omit the overhead of loading Bootstrap for all of them since I only want to use it once.

    thanks for your feedback!

    Frank
    Frank

    • Chris says

      Hey Frank,

      Thanks for commenting. Without looking up anything on the WordPress plugins page, I would imagine there is a plugin that allows you to add JavaScript or CSS to a single page or post in the edit page or post screens.

      All you would have to do then is include the JavaScripts and CSS files the same way as you would above.

      Hopefully that helps.

  3. Another Chris says

    Really helpful post, thanks. Just what we needed.

    1. Are you a potential resource for our developers who are about to start a short burst of work using Bootstrap and Genesis? Pls say yes.

    2. We want to start developers off on a very sound foundation: existing theme (StudioPress Executive Pro/2.0 probably)
    http://demo.studiopress.com/executive/
    and Synthesis hosting, hopefully Bootstrap on top plus a general policy of minimum changes to the theme in v1.0 – but we are disappointed by the slider response to Mobile viewing in Executive. You lose the text and you seem to lose slide control too. This alternative iFeature Pro handles the small screen very well by comparison.
    http://demos.cyberchimps.com/ifeaturepro/
    At last the question! how easy would it be to lift that floating buttons slider into the Executive theme?

    Thanks… C

  4. says

    Hello,

    Thank you for this how to guide. I was wondering, what is your take on Bootstrap’s Carousal Slider vs Soliloquy’s Slider? How would you incorporate Bootstraps Slider into a Theme like Genesis?

    Thanks Again

    • Chris says

      Hey Joel,

      I don’t know much about the sliders, but with a little JavaScript hacking you can make anything work. Maybe I’ll write up a tutorial on how to do this.

  5. Robert Furber says

    Chris,

    I’m looking to use Genesis for the first time and appreciate this post. I’ve been using themes from Themeforest for several years and it’s a little weird going from all the options developers put into their themes to the stripped down, basic elements that StudioPress offers.

    Obviously I find benefit with the Genesis platform, but it’s still odd trying to envision how I’ll be pulling off things that I’m used to having built in up front. What advice would you offer someone like myself? Also, the link you offered for Bootstrap has changed and it doesn’t appear the site offers the customize option any longer, should I download from http://getbootstrap.com/ or do you know of any other way to only download the files mentioned above?

    Thanks

    • Chris says

      Hey Robert,

      About using Genesis. I think that Genesis is a very robust and mature framework built on top of WordPress. Therefore, most everything that you would want to be able to customize in your theme has been done by someone, somewhere. Googling works pretty well to find tutorials (just like this one). Another recommendation would be to join the StudioPress community by purchasing a license. The forums are really good and have helped me for years.

      You are right about the link to the customize option. Looks like this is the new one:

      http://getbootstrap.com/customize/

      Does any of that help?

  6. Jacob Perl says

    Chris, thanks for this great idea…I’m really looking forward to trying it out. One question: is there a reason for not registering and wp_enqueueing the CSS/JS…or does Simple Hooks do that for you behind the scenes automatically?

    • Chris says

      There is no reason other than pure laziness on my part. :)

      I actually don’t know if it does this behind the scenes although I imagine it doesn’t. I guess it isn’t “proper” WordPress development, but it works and it seems like a quick way to get Bootstrap working.

      You could probably just run that function in the simple hooks though and it would work just the same.

  7. says

    Thanks for the tutorial. I was just wondering, have you been able to add the responsive navbar with the icon on smaller screens from Bootstrap 3 to the genesis framework? If so can you share how the best way to do that would be?

    Thank you

Leave a Reply

Your email address will not be published. Required fields are marked *