Twitter Bootstrap in WordPress theme

Just playing around with Twitter Bootstrap 3.0 in a WordPress theme development. I search for the advantage from Twitter Bootstrap for future WordPress theme development. Here what I got …

Why Twitter Bootstrap for WordPress?

Twitter Bootstrap is a CSS framework that became popular for CSS/HTML Rapid Development. There’s some projects of WordPress theme which attempt to use this CSS framework as a based.

Unfortunately, the Bootstrap just rebuild their framework to version 3.0, which make most available WordPress + Bootstrap became ‘out-of-date’ in the near future, since mostly still using Bootstrap v.2.3.x. Yet, there’s is projects which adopt new Bootstrap version 3.0, but seem a little bit premature.

The new Bootstrap seem also has a massive structural  change compared to it’s ancestor, with lot more additional capabilities. The major problem is no backward compatibility, so you have to rebuild or edit your html if you want to adopt the new one.

In other way, WordPress also has it’s ‘own framework’ which is very good on new theme Twenty Thirteen. The ‘engine’ of  WordPress, by default, generate great class-name. The default theme also has great Semantic HTML5 and using CSS3. The problem is in CSS editing, which quite complicated to match the design layout. Well, of course you can just  make a child theme of the Twenty Thirteen, in order to make it as CSS framework (from parent name). But mostly in our work, we don’t want the theme became dependent to another theme, even if that is the default theme of WordPress.

Twitter Bootstrap vs Twenty Thirteen Theme for creating WP theme

To get the picture, since we aimed for Rapid Development, I try to compare Bootstrap and Twenty Thirteen theme. Not quite a ‘vs’ though, just to see the differential.

Twitter Bootstrap v3Twenty Thirteen
CSS Resetnormalize css
ResponsiveYes; easy using GridYes; hard to modify
Semantic HTML 5No; create your own, since it’s a CSS framework.Yes
jQuery FunctionsYes; there’s some jQuery functionNo; just masonry for footer and script for mobile menu
Class-nameMight have some problem to applied to WP themeOf course yes; it’s designed for the theme
Browser backward compatibilityYes; both using html5shiv.
Prefer bootstrap since it’s also including respond.js
Generate selected classYes, onlineHardway; copy-paste
General WP (comment and etc) classNo; of course 😉Yes

I will added in the future.

Marrying both world

After brief comparison, here is what we need to do:

  • adding grid functionality from Bootstrap to WP theme. More easiest if we working with responsive layout using Bootstrap.
  • adding jQuery functionality like in Bootstrap.
  • create Online CSS Generator for WP theme is likely a good idea. So we can pick only selected class name as base.

I have to ended up for now, since I have to digging more the possibilities of marrying both Twitter Bootstrap advantage for WP theme.

Please let me know your thought in the comments. Your idea is valuable.

Categorised in: ,

This post was written by Sunaryo Hadi

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.