Bootstrapwp Theme: Twitter Bootstrap for WordPress

Posted December 15th, 2011 7 Comments

BootstrapWP Theme

I released Bootstrapwp, a powerful base WordPress theme powered by Bootstrap. Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components. Now you can use it with WordPress as a solid base to build custom themes quickly and easily.

Latest version release: .7 (01/22/2012)

You can view a demo of the Bootstrapwp theme running on WordPress at: http://rachelbaker.me/bootstrapwp/
View the style guide: http://rachelbaker.me/bootstrapwp/style-guide/
View the Javascript guide: http://rachelbaker.me/bootstrapwp/javascript-for-bootstrap/

Usage Instructions

Download the Bootstrapwp theme, and install to your WordPress site. NOTE: This is meant to be a base theme for WordPress custom theme development.
Customize and override any of the styles using style.css file. All .css and .js files are loaded in functions.php. Don’t forget to disable any of the .js files you do not need.

Download from Github

Version .7 Change Log

Updated JS and CSS/LESS files from Twitter Bootstrap 2.0 WIP files (up to date as of January 20, 2012)
Moved all CSS and JS files to their respective /css and /js folders
The LESS files still exist in the /lib folder, but the bootstrap.css file is in the /css folder
Replaced bootstrap-twipsy.js file with NEW bootstrap-tooltip.js file
Modified enqueue_style order, and added style.css to the function to ensure it would be loaded last.
Moved all Bootstrap documentation styles to their own docs.css file, and reserved styles.css for WordPress related modifications
Created template for Javascript Demo page, needed onload scripts for Demo page were added in footer.php
Moved Style Guide to it’s own template file
Moved Assets folder to root of theme folder with images folder
Any added custom styles can now be found in style.css file
Added custom jQuery to footer.php to allow the WordPress custom menus to work with the Bootstrap dropdown styles/js files.
Removed Custom Walker Class from navigation menu. It is not needed, with jQuery adding the needed class changes instead.
Added image alignments (.alignleft, .alignright, .aligncenter) styles to styles.css
Added styles to 404.php template file
Added styles to search.php template file
Added search form styles to style.css file
Added $content_width declaration to functions.php

http://braginteractive.com Brad Williams

Rachel,

I made a WordPress theme using Bootstrap too. Check it out: http://braginteractive.com/bootstrap/

http://rachelbaker.me Rachel Baker

Brad,

From what I could see your version looks great. Maybe at some point we could combine our efforts.

Gelay J

Rachel, great theme. To customize, do you recommend creating a child theme?

http://rachelbaker.me Rachel Baker

Good question. I guess it really depends on your preference. I personally never make child themes, and prefer to have everything under my control.

JP

Hello Rachel,
Thanks for the great theme. Forgive me if these are elementary questions but I’d like to do two things and was wondering if you could help. I’m using the .7 version.
1. I’d like to display the first post on the index page of the blog. Right now it displays information about the theme and how to download etc. How would I do this?
2. I’d like to insert the header of my site into the theme. I’ve built a site using bootstrap and would like to incorporate a blog as part of of it. Right now my header includes a placeholder link to “blog” as a nav item, and I have set up a wordpress installation in the appropriate directory. How can I replace the header in your theme with my own?
Thanks again for your work,
JP
Brain

I have install your theme, but the index page is missing all my stuff, do i have to build my own “post loop” ?

http://rachelbaker.me Rachel Baker

In the version .8 release (released about 1 hour ago) there is a page-blog.php template with a post loop