Using Bootstrap in themes

3 Views

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.

Post Views: 3

Related posts

Leave a Reply

4 comments

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

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

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

  4. 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).