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:
You can also add some classes like btn btn-primary, btn btn-success, or btn btn-danger will give you:
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.
