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 infunctions.php
and adding the code snippet found in the comments ofinc/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 infunctions.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 infunctions.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”
Pingback: The Best WordPress Theme Frameworks To Build Your Next Theme On | Noob Archive
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!
It’s actually not a bad SEO practice and is valid HTML5. But it’s also perfectly OK to change it if you like! :)
I just now check my blog using Bing Webmaster Tool and this tool considers multiple h1 as an error. How about this?
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.
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!
Pingback: Automattic releases new _s starter theme | WP Assistant
Pingback: Finely Tuned Consultant: Dalton Rooney | WordPress Hosting by WP Engine
Well, thanks for the 1000-hour head, using it in a project right now.
You guys rock!
Pingback: Responsive WordPress Blank-Themes in der Übersicht | Elmastudio
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.
Pingback: WordPress VIP Developer Training in Napa Valley | Oomph
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
Pingback: WordPress Communtiy links: Best WordPress resources from Around the web
Pingback: WordPress Community links: How I built “Have Baby. Need Stuff!” | WPbase
Hopefully you have a simple way to push posts or custom-post-types to the frontpage too.
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!
Pingback: Welcome to my new theme, and ridiculous new experiment | ClarkLab
So I did this:
And I got this:
Surprisingly there is a function called register_sidebar() that gets destroyed if someone follows the s/r how-to. ;)
The “how to” actually tells you to search “_s” instead of just _s to avoid that problem.
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 [])
You just changed my life. Thank you!!
Hello
Any chance this project will include the css part of twitter’s bootstrap ?
Thanks !
+1 on adding Twitter Bootstrap to it.
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.
I am having an issue with all the drop down menus falling behind text
Thank you for another great and resourceful tool!
I’m curious though about the lack of an author template page.
Pingback: Finely Tuned Consultant: Clark Wimberly | WordPress Hosting by WP Engine