spacer
Themes

A 1000-Hour Head Start: Introducing The _s Theme

Ian Stewart 166 Comments

Have you checked out the Toolbox theme? Up until recently it was the starter theme we used to build free and premium themes on WordPress.com. Toolbox was (and is!) a great theme, but it could be better. Unfortunately, we wound up in a situation with Toolbox where we wanted to make some more drastic improvements to it as a starter theme but got a little stuck. We had people using it as a Parent Theme and that meant that the simplest id or class change could become a problem. Simply changing an id of #branding to #masthead in the template is enough to break most CSS.

And there were other more beneficial but potentially more disruptive changes we thought would be great to add to it. Changes like better starter styles, including a generic framework for adding your own responsive CSS; a script for elegantly handling menus on small screens; and easy-to-rework sample theme options. And whole lot more. The sort of things we found ourselves adding to 80% of the themes we were building. You know, the sort of things that you really need in a starter theme.

So, we forked Toolbox — don’t worry it’s still being updated — and made a better, faster, stronger, starter theme. A developer-only theme that gives us the freedom — us being the WordPress.com Theme Team — to iterate with abandon on the idea of WordPress starter themes. Since that theme underscores the new themes we build we call it the Underscores Theme, or _s for short.

And it’s pretty darn awesome.

spacer

It’s a starter theme — blank seems appropriate

So, what’s so different about _s? Well, most importantly it’s that it will always be more or less in flux. It’ll be looked at again and again, always with an eye to the future of WordPress themes. But it will also always have one foot in the past. In fact that past goes pretty deep. It incorporates code and tough lessons learned from the best WordPress themes: Kubrick, The Sandbox, Thematic, Twenty Ten, Toolbox, Twenty Eleven —and probably more I’ve forgotten about! — and then, any future theme that continues to shoot for the very best in WordPress and web standards, including every version of the yearly default theme. As each new default theme is released, _s will be reviewed and updated. New techniques and best practices will continue to make their way into _s. Likewise with every theme the WordPress.com Theme Team builds using _s. As we come up with new best practices and learn new lessons in our themes, all that code makes its way back to _s.

And we’re pretty excited about making that code available for you.

Free Open Source Software FTW

This is why: The lineage and continual development process of _s gives you what I like to call a a 1000-hour head start. That’s the approximate number of design and development hours you get for free every time you use it in a project. Weeks and weeks of refinement by dozens of WordPress theme experts over several years that you don’t have to do. And because we want you to be able to take advantage of that 1000-hour head start we’re making _s available through GitHub for all your WordPress theme projects. When we make updates to _s, those changes get pulled from the same Automattic theme repository we’re using live on WordPress.com and pushed out to GitHub where you can quickly take advantage of them.

And it’s free.

Here’s what’s currently in _s:

  • A just right amount of lean, well-commented, modern, HTML5 templates.
  • A helpful 404 template.
  • A sample custom header implementation in inc/custom-header.php that can be activated by uncommenting one line in functions.php and adding the code snippet found in the comments of inc/custom-header.php to your header.php template.
  • Custom template tags in inc/template-tags that keep your templates clean and neat and prevent code duplication.
  • Some small tweaks in /inc/extras.php that can improve your theming experience. They can be activated by uncommenting one line in functions.php.
  • Keyboard navigation for image attachment templates. The script can be found in js/keyboard-image-navigation.js and is enqueued from the image attachment template, image.php.
  • A script at js/navigation.js that makes your menu a toggled dropdown for small screens (like your phone) ready for CSS artistry. It’s enqueued in functions.php.
  • 5 sample CSS layouts in /layouts: Two sidebars on the left, two sidebars on the right, a sidebar on either side of your content, and two-column layouts with sidebars on either side.
  • Smartly organized starter CSS in style.css that will help you to quickly get your design off the ground.
  • The GPL license in license.txt. :) Use it to make something cool.

There’s more development on the way but you can start using it right now. We are. :)

Get the _s Theme

Fork or download _s on GitHub or generate your own custom version at Underscores.me and have fun making awesome new WordPress themes! I know that’s what I’ll be busy trying to do.

Share this:

  • Twitter
  • Facebook
_s

166 thoughts on “A 1000-Hour Head Start: Introducing The _s Theme

  1. Pingback: The Best WordPress Theme Frameworks To Build Your Next Theme On | Noob Archive

  2. spacer Josh Kohlbach says:

    Great starter theme, I can definitely see it going places. I’m going to use this as a base for a few sites and see how it goes.

    One question though, why in functions.php are the sidebar headings being set as H1’s? From what I’ve been told this is contrary to good SEO practices, they should probably be H2 or H3.

    Fairly easy to change one modifications start of course, but could trip some people up if they don’t catch it or don’t know.

    All in all a good base theme!

    • spacer Ian Stewart says:

      It’s actually not a bad SEO practice and is valid HTML5. But it’s also perfectly OK to change it if you like! :)

      • spacer msrosyidi says:

        I just now check my blog using Bing Webmaster Tool and this tool considers multiple h1 as an error. How about this?

      • Willem-Siebe Spoelstra says:

        This is a bad practise I also have adopted to early, and the HTML 5.1 Nightly has changed his recommendation on this, still use h1-h6 to define document structure > the HTML outline is fiction because it’s not adopted yet, see blog.paciellogroup.com/2013/10/html5-document-outline/#comment-37223. So FOR SURE, this should be changed in the starter theme.

  3. spacer Kreativ Theme says:

    I like the simplicity of the _s theme, so I have adopted it for my (never finished) Oceania theme. I would love to see more updates on it and also a very simple admin interface already in place. Thanks!

  4. Pingback: Automattic releases new _s starter theme | WP Assistant

  5. Pingback: Finely Tuned Consultant: Dalton Rooney | WordPress Hosting by WP Engine

  6. spacer Thomas Vanhoutte says:

    Well, thanks for the 1000-hour head, using it in a project right now.
    You guys rock!

  7. Pingback: Responsive WordPress Blank-Themes in der Übersicht | Elmastudio

  8. spacer msrosyidi says:

    Yeah, finally I’ve finished my modification from _s theme for my blog/site. My great thanks for you and Automattic and WordPress.
    This starter theme give me a starting point to learn how to design a WordPress theme.
    Next time I will learn to write line by line my theme from zero.

  9. Pingback: WordPress VIP Developer Training in Napa Valley | Oomph

  10. spacer Karina Steffens says:

    Just wanted to thank you for releasing the Underscores (_s) theme, which I used for my newly redesigned website (neo-archaic.ie). I’ve used Thematic child themes for all my WordPress developments up until now, so a starter theme from you guys was just what I needed to cut my teeth on HTML5.
    It was an interesting learning curve, espcially the idea of hacking a theme directly, instead of using child themes. Hope you like the result!

    Karina

  11. Pingback: WordPress Communtiy links: Best WordPress resources from Around the web

  12. Pingback: WordPress Community links: How I built “Have Baby. Need Stuff!” | WPbase

  13. spacer zapatillas air max says:

    Hopefully you have a simple way to push posts or custom-post-types to the frontpage too.

  14. spacer Arie Putranto says:

    You see, in the world of people breaking things that wasn’t even broken, I found myself happy to see people like you keep on fixing things and making it simple. I’m sad, but LOL, too see to many “Premium WP Themes” with their bunch of confusing and sophisticated theme options throwing too much PHP parse errors.

    WordPress should be simple, like Toolbox. WordPress theme should not be some kind of jokes.

    So go with the _s … be happy with it!

  15. Pingback: Welcome to my new theme, and ridiculous new experiment | ClarkLab

  16. spacer Cas says:

    So I did this:

    Search for: _s
    Replace with: Megatherium
    (https://github.com/Automattic/_s/blob/master/readme.txt)

    And I got this:

    Fatal error: Call to undefined function registerMegatheriumidebar() in /…/functions.php on line 88

    Surprisingly there is a function called register_sidebar() that gets destroyed if someone follows the s/r how-to. ;)

    • spacer Jaffe says:

      The “how to” actually tells you to search “_s” instead of just _s to avoid that problem.

      • spacer BobbyBob says:

        Actually this is a problem not because of “_s” as I believe this is the last part in the search and replace. The issue here is that you need to search and replace _s with a space before the _.

        So basically you do a search for [ _s] (without the [])

  17. spacer John says:

    You just changed my life. Thank you!!

  18. spacer Paul says:

    Hello

    Any chance this project will include the css part of twitter’s bootstrap ?

    Thanks !

    • spacer Jonathan Dingman says:

      +1 on adding Twitter Bootstrap to it.

      • spacer Geir E. says:

        Thumbs up from me as well. Working on this on my own, breaking stuff all the time. Any guides or input on how to do this the WordPress way would be awesome.

  19. spacer mojtaba says:

    I am having an issue with all the drop down menus falling behind text

  20. spacer Tiffany Israel says:

    Thank you for another great and resourceful tool!

    I’m curious though about the lack of an author template page.

  21. Pingback: Finely Tuned Consultant: Clark Wimberly | WordPress Hosting by WP Engine