WordPress is one of the most popular open-source content-management-systems right now. Bootstrap ist one, if not even the most, popular HTML-/CSS-/Javascript-Frameworks right now. It does not take a whole lot of mental gymnastics to make an effort of combining those two! WordPress-Themes that are built on the mobile-first framework are plentiful in both quantity and (sadly) quality. Good and professional themes that are built on the backbone of the sturdy codebase can be found on plattforms like themeforest.net, Themetrust, Themify.me and many others. Due to the popularity of WordPress, not just as a blogging-plattform anymore, designers focus their time an effort valiantly on monetizing the current hype – so why not learn how to get a piece of the cookie?
That is why I will be looking at the newest iteration of the Bootstrap-framework, which is currently still in its alpha-stage – v4.0.0-alpha.2. More specifically, how to twist and turn it into something that WordPress can use. The goal of this little experiment is a fully working WordPress-theme, that will completely based on Bootstrap and can be easily extended and built upon. We will learn both the intricacies of the Bootstrap-code and WordPress-markup and will dabble in HTML, PHP, CSS and even a little bit of jQuery. Do not worry, child – I will explain pretty much everything in so much detail, that you wont walk out of this scratching your head!
This is what you need
To get started you need to do a little bit of legwork. Not more than you would usually have to do if you were to set up a WordPress-Blog, but for completionism sake here is what you need to have done before you can get into the nitty-gritty:
WordPress
WordPress can be downloaded on its offical website for free. You will need a webhost or a local environment to fullfill the PHP/MySQL requirements. Not sure how to set either of them up? Do check out my article will surely shed light on that conundrum.
For the sake of this tutorial you don’t need to install any plugins or mess with this in any other way – pretty much just the clean install with the pre-existing demo-content will be just enough to suffice.
Bootstrap
The development-version of Bootstrap can currently not be downloaded in a ready-to-go fashion officially. You will have to compile your own version using the tools specified over here.
Or, you know – grab it from this helpful repo over here.
Coffee