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.
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.phpthat can be activated by uncommenting one line infunctions.phpand adding the code snippet found in the comments ofinc/custom-header.phpto your header.php template. - Custom template tags in
inc/template-tagsthat keep your templates clean and neat and prevent code duplication. - Some small tweaks in
/inc/extras.phpthat 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.jsand is enqueued from the image attachment template,image.php. - A script at
js/navigation.jsthat 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.cssthat 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.
ThemeShaper 
166 responses
[…] WordPress theme framework and _s (Underscores) starter theme: These come from the people who know WordPress best — the Automattic Theme […]
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 http://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!
[…] Stewart said _s incorporates code and lessons learned from many of the best WordPress themes, and will continue its evolution incorporating things with each new default theme release. They have made it available for free through GitHub, which means any updates and changes to _s get pulled in from the same Automattic theme repository being used live on WordPress.com and pushed out to GitHub. Read more about the theme in Stewart’s announcement post on ThemeShaper. […]
[…] very clean base theme for every site I build. For a long time it was Sandbox, then Toolbox, and now _s. I have a customized version of _s that helps me get started on new projects very […]
Well, thanks for the 1000-hour head, using it in a project right now.
You guys rock!
[…] du eher eine reduzierteres Blank-Theme für deinen Projekt-Start nutzen, bietet das neue _s Theme eine solide Grundlage. Das Theme wurde vom Automattic-Team entwickelt und bietet ein […]
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.
[…] code. Michael Fields of The Theme Team shared his expertise, including advice on leveraging The _s Starter Theme that gives theme designers a “1000-hour head start.” During one of my favorite talks – […]
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
[…] Ian Stewart at themeshaper put together a heck of a tutorial Introducing The _s Theme – A 1000-Hour Head Start. […]
[…] Ian Stewart during themeshaper put together a heck of a educational Introducing The _s Theme – A 1000-Hour Head Start. […]
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!
[…] new theme, powered by the Automattic-built _s. Underscores, as it’s also known, is a bare-bones starter theme meant for hacking, NOT child […]
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.
[…] do a little of both. Recently I’ve been using _s (aka Underscores) by the Automattic team. It’s the base theme that Automattic actually uses when building every […]
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?
That’s the beauty of GPL, you can do whatever you want with _s 🙂
I’ve found a theme based on _s/twitter bootstrap (http://themekraft.com/tk-wordpress-bootstrap-starter-theme/) and a tutorial (http://www.kungfunguyen.com/make-custom-wordpress-theme-bootstrap-3-underscores/)
I have just begun getting back into wordpress theme development and this has really helped kickstart my next project.
I’m going to try this, although it would be really nice to see some themes built with _s. 🙂
Most of the recent themes on WordPress.com are based on _s, like Nurture, Highwind or Expound.
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
I’ve updated the article thanks to you 🙂
Greetings!
I just downloaded _s from GitHub, but the license.txt file is nowhere to be found.
Thanks for all the effort!
Thanks for the heads-up, I’m looking into this.
Hi there, I looked into this, and bundling a full copy of the license separately is optional, not required. _s specifies and links to its license type in style.css:
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Reference: http://make.wordpress.org/themes/guidelines/guidelines-license-theme-name-credit-links-up-sell-themes/
I hope this clarifies things – thanks for asking.
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!
Hi Jeroen, glad you found the theme and tutorial useful!
Great question about theme translations. The developers decided not to include translations for _s, with the main reason being that “starter themes are meant to be forked and strings will more than likely change rendering the translations incomplete.” You can read the full discussion here:
https://github.com/Automattic/_s/pull/50
Someone did create a Dutch translation for _s that you can have a look at here, in case it saves you some work:
https://github.com/Automattic/_s/pull/151
Hope this helps!
Hi Kathryn,
Thank you! Yes: This helped a lot.
Regards, Jeroen
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
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?
Hi Paulus, in case you haven’t already seen it, Konstantin wrote a post recently that may answer your question:
https://themeshaper.com/2013/10/11/dont-update-your-theme/
Thank you guys, really appreciate you saving me 1000’s of hours, I will be bootstrapping this one as a first project. I am like a kid with a new toy. 🙂
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!
Hi there, the two-sidebar layout is in the folder called layouts. Look for the file called:
sidebar-content-sidebar.css
You can grab a full copy of the theme here, which includes the layouts folder.
https://themeshaper.files.wordpress.com/2013/10/shape.zip
Copy-paste the CSS from sidebar-content-sidebar.css into your style.css file if you want to use it.
[…] its features as well as the reasons why Toolbox was forked to create this new starter theme — everything is here. Also, you can create a custom version of Underscores over […]
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
I’ll try to make one 🙂
I need to be familiar with the classes that you’ve been using.
do you have like a list of css classes? hehe
Hi Julius, you can see all the CSS classes and other styles used in _s in the style.css file over at GitHub:
https://github.com/Automattic/_s/blob/master/style.css
I would also reiterate what some others have said. Having more than one h1 on a page is very bad for SEO.
People have different opinions about the role of the h1 tag in SEO. If you feel strongly about it you’re welcome to modify the theme.
@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.
Tim, feel free to get involved in the _s project over at Github – that’s where decisions take place: https://github.com/Automattic/_s/issues/383
Why this theme cannot be found on wordpress.org? Shouldn’t be there if it is valid wp theme?
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.
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.
So no solution?
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.
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.