• Skip to primary navigation
  • Skip to main content
Sal Ferrarello
  • About Sal Ferrarello
  • Speaking
  • Connect
    Mastodon GitHub Twitter (inactive)
You are here: Home / Programming / Why I Build WordPress Themes with Bootstrap

Why I Build WordPress Themes with Bootstrap

Last updated on August 17, 2015 by Sal Ferrarello

Recently, I’ve seen a lot of discussion in the WordPress community about Fränk Klein’s article, Why Bootstrap is a bad fit for WordPress Themes and I’d like to take a moment to explain why I disagree.

I use Bootstrap for all of my custom WordPress themes because it makes me more efficient. This is the same reason I use the StudioPress Genesis Framework and jQuery. To take it to an extreme, it is the same reason I use WordPress rather than rolling my own CMS. All of these resources allow me to leverage the expertise and experience of other developers, which in turn makes me more effective.

I use Bootstrap for all of my custom WordPress themes because it makes me more efficient.

I look at the cost/benefit ratio. Though the cost can take many forms, including less control and an increase in complexity, file size, and load time, the benefits far outweigh them. Fränk Klein and I simply disagree about the ratio of cost vs. benefit for Bootstrap.

What I Like About Bootstrap

Once I’ve applied Bootstrap, I have a workable set of CSS styling rules and responsive behavior. I have classes available for styling buttons. I have a basic nav that works across a variety of screen sizes and devices. I have heading, paragraph, list, and blockquote styles that relate nicely. I have my starting point, which I can then modify. Often these modifications can be made through Bootstrap’s Sass variables, which allow me to cleanly modify the CSS without increasing the size of the final CSS file.

Arguments Made Against Bootstrap

Bootstrap is the wrong tool for the job

“[Bootstrap] was created so that developers could focus on back-end code and quickly iterate without having to worry about the front-end”

WordPress was originally a blogging platform, not a CMS or platform for web applications. But often, as is the case with WordPress, we find new uses for items that surpass their original use. This is one of the benefits of technological evolution.

Bootstrap does not do things the WordPress Way

If I’m reading this correctly, I think the idea here is a preference for semantic class names (.copyright, .intro) and markup rather than Bootstrap’s use of presentational class names (.row, .span8). There was a time when I was a fierce proponent of using semantic class names but experience has made me more pragmatic. Frameworks and their presentational classes allow me to work more efficiently and maintain cleaner code, which makes me more valuable to my clients.

The related criticism here seems to be that wp_nav_menu() requires a custom walker to generate Bootstrap markup. In my experience, a custom walker can be more cost- and time-effective than writing custom CSS and JS for a navigation. On a personal note, for a nav of any serious complexity I use the Ubermenu plugin.

Bootstrap is bloated

Bootstrap does hold a lot of functionality and lines of code, but using the Sass version of Bootstrap has the benefit of allowing you to eliminate unnecessary sections and reduce your file size. Even with all the CSS included, I’d argue the benefit of using Bootstrap outweighs the 130 KB of CSS.

Bootstrap does not encourage great design

I am not a designer, I’m a developer, so I can only speak peripherally on this point. However, the designers I’ve worked with have done an amazing job adapting to Bootstrap and to responsive web design in general. I’ve been so impressed, in fact, that I gave at talk about it at WordCamp Philly 2014 called How to Be a Designer that Developers Love (slides).

I’ve worked on projects where we modified Bootstrap 3 to use an 8 column grid rather than 12, using a Sass variable. Additionally, I’ve worked with designers who break components of the site out of the grid system entirely and, in these cases, I’ve leveraged custom CSS to accommodate their design. This is an example where the cost of additional development time must be weighed against the benefit of the modified display.

Bootstrap Genesis Starter Theme

Bootstrap may not be the right fit for your theme but that doesn’t make it a bad fit for WordPress. I love Bootstrap and WordPress and I love them together. I love them so much I created and maintain the Bootstrap Genesis starter theme, which is running on this blog unmodified. This is the starting point I use for all of my custom WordPress site development. Feel free to fork it on GitHub.

Bootstrap may not be the right fit for your theme but that doesn’t make it a bad fit for WordPress.

Related Posts

Why I Use the Genesis Framework

If you’re interested in why I use the Genesis framework, you can read about it in my post Why Use the Genesis Framework.

Bootstrap vs WordPress

I’m seeing a lot of people specifically ask the question, “Bootstrap vs WordPress”? I’ve shared my thoughts in my post Bootstrap vs WordPress.

Sal Ferrarello
Sal Ferrarello (@salcode)
Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.

Share this post:

Share on TwitterShare on FacebookShare on LinkedInShare on EmailShare on Reddit

Filed Under: Programming Tagged With: Bootstrap, WordPress

Reader Interactions

Comments

  1. sarankumar says

    October 26, 2014 at 2:04 am

    Thank you for sharing your view.

    Reply
  2. Deven Sharma says

    January 26, 2016 at 9:58 pm

    I agree with you. There are so many hate articles against using bootstrap with wordpress, which is beyond me.

    Reply
  3. Isabelle Garcia says

    March 4, 2016 at 9:53 am

    Thanks for being a defender of WP theming with bootstrap. I am on your side!

    Reply

Leave a Reply Cancel reply

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

Copyright © 2023 · Bootstrap4 Genesis on Genesis Framework · WordPress · Log in