I recently came across a great WordPress Theme template called Roots. Roots is a starting WordPress theme based on HTML5 Boilerplate & Bootstrap from Twitter. It’s a blank template which is ready-to-go for designers to add all their artistry to.
I was immediately drawn to it because I already use the HTML5 Boilerplate and Bootstrap. So I was fairly excited to find Roots which combined them both!
I went ahead and downloaded it and installed it into a test WordPress installation. I was impressed with the settings and the nice Bootstrap-like menu bar on the top. I already had my site designed in PhotoShop, so now it was just a matter of some slicing and breaking everything down into the CSS file.
But I ran into a simple issue which set me back and pretty much made me feel like a big newb. Perhaps this should have been more obvious, but I couldn’t find out which CSS file to add my edits to. There wasn’t any information about this on their site at all – just links to H5BP an Bootstrap.
My first guess of where to put my customizations was the standard CSS file that WordPress uses (style.css). I went ahead and opened it, finding the standard information on top and the rest being blank. “Great” I thought. I started by adding a background image to the html tag.
html {background: url(‘path-to-image.jpg’) center center fixed;}
Refresh the page and… nothing. Hmm… Did a little page inspection and it looks like the HTML element doesn’t even show my CSS addition. So I go ahead and check the source and notice that the standard style.css file isn’t eve being called. Okay, so what IS being called? Twitter Bootstrap CSS. Okay, but I’m not sure I am supposed to put my CSS in there.
Just as I was thinking that I went back and checked the header again and noticed this little blip:
<link rel=”stylesheet” href=”/css/app.css”>
“Ahh!” I thought. And so I went ahead and opened that file in my editor. Voondabar! I found it! Nicely laid out with some of the major elements pre-declared (which is very nice) so that all I have to do is inter my CSS and get started.
From there I was finally able to get moving on my custom WordPress Theme using Roots. It’s about half-way done and once it gets finished I’ll be sure to post about it here.
Overall I’m not sure why they created an entirely separate CSS file instead of just using the default style.css file. A good reason to use the default style.css file is so that in the WP editor you can make some quick edits if you need to without having to open a separate application (good for “quick” edits only, not really for working in). But then again, I’m fairly new at creating WordPress Themes from scratch. So perhaps they have a good reason for making it what it is.
I like what Roots has to offer – a perfect blank template in WordPress with the benefits of H5BP and Bootstrap. I’m excited to finish my new site design with it. Once I do, I’ll be showing it off for sure.
