Bootstrapwp Theme: Twitter Bootstrap for WordPress

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

  1. Download the Bootstrapwp theme, and install to your WordPress site. NOTE: This is meant to be a base theme for WordPress custom theme development.
  2. 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

21 thoughts on “Bootstrapwp Theme: Twitter Bootstrap for WordPress”

  1. 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 

  2. Hi and thanks for all of the work that you’ve put into this theme. In my opinion yours is the best implementation of Bootstrap into a WP theme. I’ve been testing as many of the others as I can find out there to learn WP and Bootstrap and yours is solid and straight forward with the ability to integrate the best of Bootstrap fully.

    In tweaking Bootstrapwp to use more as a CMS I noticed this in style.css :

    ++++++++++++++++++++++++++++++
    .navbar ..sub-menu:before

    ++++++++++++++++++++++++++++++

    Is this what you intended ? Shouldn’t it be:
    ++++++++++++++++++++++++++++++

    .navbar .sub-menu:before
    ++++++++++++++++++++++++++++++

    Or, is there a function in CSS that 3 dots will activate? I’m admittedly still learning all of this and so far see no adverse effect of this, if this is a typo (as I often make with more noticeable consequences) but otherwise would like to know the function, if possible.
    Thanks again and best to you….
    CLS

  3. Hi Rachel

    I noticed when I uploaded to the www host server that there is a file named .git and a folder named .gitnore that were invisible to me on my local machine server. I explored them and cannot determine if they are essential for the theme or if it is left over.

    Can I safely delete these on the server or should I keep them to maintain some functionality I am not aware of?

  4. Hi Rachel,

    I’m having difficulties adding the is_tax() conditional to your breadcrumb function. Could you point me to the right direction?

    Thanks.

  5. I downloaded the bootstrapwp theme from this website and tried uploading it to wordpress, it said ‘This file is too big. Files must be less than 1500 KB in size.’
    Are their files that should be removed or deleted from the bootstrapwp zip file?

  6. Great theme! First time with Bootstrap and using LESS. I am trying to identify in your theme where exactly it’s pulling in the LESS files. Thanks!

  7. Hi Rachel,

    Currently a if a top-level page in the main WP menu has a child page clicking on the top level page triggers the dropdown but doesn’t link to that page itself. Is there a way to make it do both in your theme?

    Thanks!

  8. Hey nice stuff! I’m going to use this to build a responsive theme (hopefully without shrinkage). The icons are a nice touch. After doing extensive research on what theme to start with and getting my hands dirty with html5, i’ve decided to use this. It was between starkers, and bones.

    1. KL,

      I also enjoy Sass, however Bootstrap is built on Less. At this time I do not have any plans for expanding the scope of the WordPress theme into a port for Sass.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>