A 1000-Hour Head Start: Introducing The _s Theme

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.

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.

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. 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!

  3. 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. Pingback: Responsive WordPress Blank-Themes in der Übersicht | Elmastudio

  7. 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.

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

  9. Just wanted to thank you for releasing the Underscores (_s) theme, which I used for my newly redesigned website (http://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

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

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

  12. 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!

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

    • Jaffe says:

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

      • 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 [])

  14. Paul says:

    Hello

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

    Thanks !

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

  16. Hey Guys,

    Is it OK to bring in the twitter bootstrap into the fold when using _S? It seems like, there is a significant amount of cross over in between the two? For example, responsiveness and grid system ( class names ). I guess the question is does it make sense to use twitter bootstrap when starting off with _s?

  17. I think this article needs updation regarding following files as some of them has been removed and some renamed.

    /inc/theme-options/
    /inc/tweaks.php
    js/keyboard-navigation.js
    js/small-menu.js

  18. Etna says:

    Greetings!
    I just downloaded _s from GitHub, but the license.txt file is nowhere to be found.
    Thanks for all the effort!

  19. I’m thrilled about this theme, especially in combination with the tutorial. Thanks a lot for the support!

    One snag I seem to hit today: I’m using this theme for a Dutch site, but some terms stay in English. I’ve understood that themes may need their own translation. I’ve searched for a Dutch translation file, but I couldn’t find one. Frankly, I can’t imagine that someone hasn’t already solved this. Or maybe I’m at the wrong track? Any suggestion is appreciated!

  20. I am trying to change my existing wordpress based site http://funnychutkule.com to responsive web design. Just reached here looking for the start point for creating a new theme.

    I hope I will be ready with new responsive layout soon as you just saved 1000 hours already

  21. I’m just getting started with understanding Theme development and bought a book which recommended the child theme method and using Thematic… which brought me to this site and _s

    Having been so recently impressed by the child theme approach I’m wondering what the advantages are of going down the approach suggested with _s of using it as a starter theme, then forking, is exactly. Doesn’t it mean that future fixes to _s may be harder to roll into a theme that is based on it?

    There are obviously advantages to forking and building out from a simple core, what are they?

  22. Hi guys,
    this is a great starter theme. I want to use it for a redesign.
    But how can I find out you’re mentioned css layout options? I only found one sidebar, but I need two sidebars. One one the left and one on the right side of content as described.

    Thanks a lot!

  23. Pingback: Six Best Starter Themes for WordPress Theme DevelopmentWordPress Knowledgebase

  24. Hi, I have almost completed a WP site based on the underscore_s theme.
    On the site is the Facebook like box plugin which doesn’t show on iPad & iphone.
    The site is http://www.blikopzeewolde.nl

    At first I thought, that makes sense since Ios doesn’t support flash, but I have used the same plugin on other WP themes (like http://www.cityplot.org) where it does show on iPad/iPhone.

    Now I guess I need to add extra css or some other coding to the theme to make it work, but I have been searching on the internet for weeks, asked forums and haven’t found a clue yet nor did I get any answers.

    I hope anyone here can help me out.
    Thanks.

    • Hi Grietje, I’m not seeing the content of that Facebook Like box on a desktop version of Firefox 26 either, so I don’t think it’s an iOS-specific issue.

      A couple of troubleshooting methods you can try:

      – install a vanilla test copy of _s either locally or on a test server and make sure the plugin works there too, to rule out a theme customization as the culprit.

      – deactivate all your plugins except the Facebook one temporarily. If the Like box appears, then reactivate them one-by-one to find the culprit.

      If that doesn’t work to narrow down the issue, you could try posting in the plugin’s support forum – the developer may be able to help you out there:
      http://wordpress.org/support/plugin/cardoza-facebook-like-box

  25. Tim says:

    @Kathryn I realize there are different opinions, however, the intent of an h1 is for a section heading or page heading. It should never be used for sidebar items, which are not in any way the page’s main content.

    • Good question, dusan! _s is actually only meant as a starting point for building your own theme. On its own, it lacks styles, so it would not pass the WordPress.org theme check or theme unit test. Having it on Github also has the benefit of leaving its development open to community involvement.

  26. I’m building a dev theme using _s and am loving it. I’ve learned much over the last few weeks… thanks for that! I’ve noticed that page titles for the category, tag and blog-home pages have been removed. For some clients I need these. I managed to add the cat and tag titles back in via archive.php, but the blog home page is stumping me. Where and how should I add it back in?

    • Hi Tricia, I’m not sure what type of page title you mean on the blog – I don’t think the blog index page usually has a title, does it?

      • Some clients want that, yes. With my last theme, whatever title was entered on the page that was designated as the blog (in settings > readings) was picked up as the page title and then all posts would feed in below. In many cases it’s as simple as “Blog”, but others may have “Blog with –insert name.” This would be on the home page of the blog – not the front page of the site.

      • Looks like I missed your earlier reply – sorry about that. I would suggest letting an SEO plugin handle this for you. A plugin would give you finer control over the display of titles on various parts of the site, so you wouldn’t need to code this into the theme.

  27. I’m loving _s. What a great starting point. I’ve done one new site and converted one old site. The conversion site was easy, and the new site was even easier. Merged my Bootstrap 3.1.1 framework with _s with very little effort, and I couldn’t be happier with the results. Thanks to everyone involved in bring out _s.

Comments are closed.