My First WP Theme: “Boilerplate: Starkers”

Building on the shoulders of giants, I present to you the Boilerplate: Starkers WordPress theme!

Having been thoroughly inspired yet again by Paul Irish, this time working with Divya Manian, and their HTML5 Boilerplate, I couldn’t wait to build all of the goodness into my current WP blog theme.

Then, I thought, “for the most part, this is really how everyone should be starting their WP theme…”

So… check this shizzle: https://aarontgrogg.com/boilerplate/

The first thing you will likely notice is that the design is… a little stark… It is, in fact, completely starkers, as in the Starkers theme by Elliot Jay Stocks! I started with this “bare naked” theme to give users the most flexibility without them having to cut things out. The idea would be for users to create Child themes that can build off of this Parent.

I then started adding in all of Paul and Divya’s goodness, like HTML5, Microformats, etc., but once again, I didn’t want users to have to cut things out of the templates if they didn’t need/want them, so I fashioned a Boilerplate Admin panel (below) that allows users to toggle the inclusion of such features as a handheld or print CSS file, Modernizr, jQuery, etc.  Checking any of the options automatically adds the respective files to the page.

Boilerplate Admin Panel

The most significant mark-up change I made was moving the IE Conditional Comments from around the <body> tag to around the <head> <html> tag (thanks for the edit, Dan). I felt this not only better fit with the Modernizr approach, but also interfered less with the native WP $bodyclass functionality. As a fortunate side-effect, it also allowed me to remove the empty Conditional Comment from the <head> (there to prevent CSS blocking).

The theme is available from the WordPress Repository, and I welcome any and all comments, thoughts, or musings.

Happy theming,
Atg

Kudos go out to:

17 Responses to My First WP Theme: “Boilerplate: Starkers”

  1. Micah says:

    This is an excellent start for the boilerplate converted into a WordPress theme. I would like to add the following for you to consider:

    http://digwp.com/2010/03/wordpress-functions-php-template-custom-functions/ – My favorite inclusion to the functions.php file is removing the unwanted crap from the head as well as putting threaded comments in the functions.php (to keep the head clean).
    http://digwp.com/2010/04/wordpress-custom-functions-php-template-part-2/ – Completely removing version number from installation. Very good security practice to follow.
    There’s lots of other good stuff to reference on digwp.com as well, but these are the things I immediately include.
    In your boilerplate admin, you should provide a checkbox option to include asynchronous Google Analytics code to the head, with a field input to easily add the account number. If checkbox is enabled, it can put the code at the bottom of the head.
    For those not interested in using the Modernizr project, adding a link to the CDN version of the HTML5 Shiv would be a great option (with a note explaining to use one or the other.

    These are the most important notes I can contribute. Thanks for your hard work on this!

  2. Dalton says:

    I was just going to sit down and write something just like this (HTML5 Boilerplate + Starkers) so I’m glad to see that someone beat me to it! Looks very good on first glance. I agree, it seems like it would make good sense to include the HTML5 shiv.

    Cheers,
    Dalton

  3. aarontgrogg says:

    FYI: Upgrade is now available!

    I’ve included everything I could find from the HTML5 Boilerplate upgrades, and almost everything people recommended to me. The only thing I couldn’t add was Micah’s suggestion of adding Google Analytics, because WP’s uploader blocks it… They’re looking into a way around that.

    In the mean time, if you’d like this added to your theme, let me know and I’ll get the file with the GA code in it.

    Peace,
    Atg

  4. Rima says:

    Aaron, thanks for a great HTML5 theme. I was wonderign why you did not include the HTML5 IE enabling script in the head? I think that would make a lot of sense to have there:

  5. aarontgrogg says:

    @Rima: If you’re talking about Remy’s IE Shiv, it’s actually included as part of Modernizr, and, thanks to Micah‘s suggestion, as of the latest update, is included if you choose not to use Modernizr. If you’re talking about something else, please expand.
    Thanks!
    Atg

  6. Rima says:

    Aaron, that’s great, I discovered that setting in your Boilerplate template some 5 minutes after posting. Duh! Thank you in any case.

  7. Micah says:

    Hey Aaron, the new version of your theme looks great! Glad I could help.

    One thing I’m really curious to know is about the protocol-relative url that Paul Irish included in the boilerplate project.

    I realize that you can deregister the local jquery script to add the boilerplate version. I like the boilerplate method b/c it uses both the CDN version, is compatible with http and https, and will grab the local if the CDN version isn’t available.

    I can’t figure out how to both deregister the local wp version of jquery and entering the protocol relative url version using the wp_enqueue_script method. Entering an echo statement within the enqueue function also spits out code at the beginning of the source code.

    Is it possible to include the exact boilerplate method through your custom boilerplate-admin script using the wp_enqueue_script or similar method?

  8. aarontgrogg says:

    @Micah:

    Hi again, Micah. I understand what you’re looking for, and there are several updates I have been trying to get through the “WordProcess”, and am having trouble doing so…

    The submission/upgrade system is a bit too automated for its own good, and trying to get past this is really exhausting…

    I am considering one of two things:
    1) Dumping this theme altogether, and
    2) Converting the theme to a plug-in, to make implementation on any theme easier.

    If I get the energy and can get past the WP Guardians, I will certainly include this in the next update.

    Thanks again,
    Atg

  9. alex says:

    I’m just getting ready to try making my first WP theme, and I am so happy to have found this. Thanks so much for making it!

  10. Brent Logan says:

    This is too cool! Have you considered adding 320 and up functionality to your next rev?

  11. Dan says:

    Does the development of this plugin mean you’re going to dump the boilerplate theme, or do you intend to keep both going?
    BTW, is the plugin based on the latest build of the html5 boilerplate? I see the boilerplate theme hasn’t been updated since november last year…

  12. aarontgrogg says:

    @alex: Thanks, be sure to let me know what you think! And if you want to add HTML5 Boilerplate stuff to existing themes, I’ve created this plug-in as well:
    http://wordpress.org/extend/plugins/html5-boilerplate/

    @Brent: Interesting idea, could serve as a new “option” in the Admin panel, whether to replace the appropriate files or not… Hmm…

    @ Dan: Yes, the Theme is in dire need of an update, but I hit a really large, annoying wall when I last tried to update it through WP, and I haven’t built up the energy to try to scale it… I hope to be able to do so soon. In the mean time, the plug-in is up-to-date as of the date of publishing, and I will be keeping an eye on things and trying to keep it up-to-date as much as possible.

    Cheers, all,
    Atg

  13. Dan says:

    Good stuff, I intend to use either the plugin or the theme for my next project. I’m just trying to decide which route to go down.
    I guess if I use your theme as a parent theme, then there is ultimately going to be less load time than building my own theme/using another parent them + installing your plugin. Do you agree?
    Thanks again,
    Dan

  14. aarontgrogg says:

    @Dan: Thanks! I don’t know if load time is such a big thing, especially if you’re using a caching plug-in (which I would recommend).

    The only real difference I could see for which to use is that the theme might be better if you’re starting from scratch, and the plug-in might be better if you have an existing site/theme already.

    That said, I have been having a tough time getting updates approved into WordPress’ repository for the theme, so it is actually a little out of date, while the plug-in has gone through just fine, so will likely be kept more up-to-date…

    So, there’s that… :-)

    Cheers,
    Atg

  15. Dan says:

    Ok cool, thanks. I guess the plugin is probably the way to go then…
    Cheers,
    Dan

  16. aarontgrogg says:

    Please note that there was a change in WP 3.3+ that breaks the order this Theme loads JS files, including putting jQuery after the site-specific JS files, which of course doesn’t work so well…

    I’m working on a fix and will push to the WP Repository as soon as possible, sorry for the snag.

    In the mean time, I highly recommend to simply not upgrade to WP 3.3+ until this Theme supports it.

    Cheers,
    Atg

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.