Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Twitter has just came out with a new web framework called Bootstrap. What's the right way to use it within a theme?

Update: The stylesheet inclusion is simple indeed. I want to know which caveats or compatibility issues I should expect.

share|improve this question
2  
...by following the sample mark-up structure and including the stylesheet in your theme? –  onetrickpony Aug 30 '11 at 12:39
1  
andij.com/2011/08/22/bootstrap-from-twitter-for-wordpress follow along with this! There's a couple people working over on that site it looks like, to get a theme going –  Rev. Voodoo Aug 30 '11 at 13:33
add comment

4 Answers

up vote 5 down vote accepted

A few things to consider:

  1. Enqueue stylesheets properly, using wp_enqueue_style(), and hooked into either wp_enqueue_scripts or wp_print_styles
  2. Enqueue scripts properly, using wp_enqueue_script(), and hooked into `wp_enqueue_scripts()
  3. Ensure that enqueued stylesheets and scripts are only enqueued on the front end, and not in the admin back end. Bootstrap and similar frameworks should only be used on the front-end, and should never be used to override or circumvent core UI in the admin back-end.
  4. Use built-in WordPress scripts wherever possible, to avoid conflicts with Plugins, etc. that may be relying on the core-bundled script being used.
  5. Consider core image sizes (thumbnail, medium, large) with respect to the Bootstrap media grid
  6. Ensure that UI elements such as Menus (wp_nav_menu()/wp_list_pages()/etc.), Pagination (paginate_links()/paginate_comments_links()/wp_link_pages()), etc. integrate with core WordPress functionality
share|improve this answer
add comment

just a theme folder with the bootstrap folder and then i make a style.css with

/*
Theme Name: Your theme
Theme URI: http://...
Description: Theme based on bootstrap

Author: You
Version: 0.5
*/
@import url("bootstrap/css/bootstrap.css");

...etc

my $0.02

share|improve this answer
add comment

Depending on the theme you're using, you may not be able to enqueue the CSS stylesheet as you need to.

You need to include it as the absolute first CSS in your site, or you can have unexpected design quirks. We use Thesis Framework a lot and it even prevented us from doing this.

So we wrote a plugin to solve this problem. No matter what theme you use you can include the latest twitter bootstrap CSS as the first CSS link in your site. It is the first entry after the opening document HEAD element.

The plugin also has twitter bootstrap Javascript support and now has a LESS compiler so you can completely customize your bootstrap styling. There are also shortcodes includes so you can use some of the Twitter Bootstrap elements quickly too.

This will work with ANY theme you use.

Grab it from the WordPress.org repository here.

Let me know what you think... Cheers, Paul.

share|improve this answer
add comment

WordPress theme has near-absolute control over output. There are possible minor issues (like WP functions generating some classes in output that framework uses), but simply put there won't be anything that you can't work around with moderate effort (theme development itself being more than moderate effort).

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.