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
#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 in
functions.phpand adding the code snippet found in the comments of
inc/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 in
- Keyboard navigation for image attachment templates. The script can be found in
js/keyboard-image-navigation.jsand is enqueued from the image attachment template,
- 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 in
- 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.
166 thoughts on “A 1000-Hour Head Start: Introducing The _s Theme”
Ooh, I can’t wait to dive into this! Thanks for sharing!
You should really fix that mess inside
<title>tag and replace it with a simple
bloginfo( 'stylesheet_url' )CSS along with
wp_enqueue_script( 'comment-reply' );should be moved too. Otherwise you have
functions.phpand the rest in
header.php, which doesn’t look good.
Thanks for taking a look, Kaspars. A even simpler
header.phpis on the todo list.
That’s good to hear because that “title” tag thing has been bothering me since the release of TwentyTen (see this blog post).
One question though — why are you calling
if ( ! function_exists( '_s_setup' ) ):only for
_s_setupand not for
_s_widgets_init. They all have
add_actioncalls which can be easily removed if one wishes.
Good question. Another item for the list.
Speaking of the
tag, there is talk on WordPress Trac looking for a better option entirely. I’d say that’s pretty much a reason for it looking the way it does, not very flexible!
Reply for Kaspars last question. That pluggable function is inherited form Toolbox, and it makes sense for child themes, they can easily override parent theme setup options.
I guess so. However, I think it’s better to use standard action calls to add or remove specific parent theme functionality. In order to have your own child
_s_setup()function, simply call
remove_action('after_setup_theme', '_s_setup')and add your own
No child theme should have the same function names as the parent theme.
I wonder if you considered using Twitter’s Bootstrap for basic stuff like responsiveness and layout?
Not yet. I think that moves into the 20% realm of user concerns. That said that’s one of the reasons I’m glad we’ve put _s on GitHub. Someone will consider adding more developed layout styles to _s and maintain a fork of it there for all of us to use. Maybe it’ll be you—or me! I’m hoping to see lots eventually. 🙂
I’ll keep an eye.
You might want to take a look at Roots developing theme. It has Twitter’s Bootstrap built-in.
Had a quick peek earlier, I’ve got to say, it’s an interesting name to go for! 😉 Would I be wrong in saying Twenty Twelve has probably been developed (so far) from _s or not? I’m almost positive the code looks similar, that or I’m going crazy? OK no need to answer that one! 😛
You’re not too far off.
Great eyes, Mark!
In fact, Twenty Twelve did *not* have _s code in it at the start. The fact that they look so similar was a funny, but true, story.
What I mean is, we didn’t just take _s and change some names and submit it to core as Twenty Twelve. Here’s the story of what happened.
Ian had been hacking on _s for a while, taking the best of Toolbox and all the things we’ve been learning, feedback from tons of bug reports, and adding things in, cutting things out, et cetera. All the stuff he talked about in this blog post.
Independently and around the same time, without looking at the code in _s very closely, I had already started on the base code for Twenty Twelve (no styles, just the bare bones template).
Steps I took:
1. I opened both Twenty Ten and Twenty Eleven in TextMate and in a file comparison app (FileMerge.app)
2. I duplicated Twenty Eleven to make a new theme in my working directory, then opening it in TextMate I went through and changed “eleven” to “twelve” everywhere in the new theme (about 15 minutes)
3. Then using FileMerge and TextMate I went line-by-line and file-by-file; this took about 4-5 hours.
4. I deleting a whole bunch of stuff from the new theme, while closely comparing it to the previous 2 default themes to make sure I kept the important pieces
4. A day or two passed by …
5. Ian mentioned in our work chatroom, something about the _s theme he was working on, and I thought to myself, “Self, you should really go see what he’s doing over there”
6. I took my modified Twenty Twelve theme and opened it side-by-side in FileMerge with _s, and did a visual diff on the two, file-by-file. Surprise!! We’d reached almost the exact same end point in the code, without talking about it or planning it.
Of course now that a bunch of people are hacking away at _s I’ll keep an eye on it, and see if any of the bug fixes would be good to have in the default WordPress theme. Other than than they are two very different themes.
Same with Twenty Twelve; having it in core will mean hundreds of expert eyes on it, and millions using it eventually. Those bugs and fixes I’ll try to bring back to _s if I can.
They are really for different purposes:
_s is a starter theme to hack on and fork and make your own. We fork it each time we make an Automattic theme.
Twenty Twelve is the default WP theme, and has to include certain core features. If I were to use it for a project I’d probably use a child theme.
Just for fun—and to bore our grandkids with WP theme history lessons, here’s the actual chat logs of my “AHA” moment.
Jan 17 21:48:39 in the Theme Team chatroom
Love your work Ian. This is totally cool and I hope Automattic support it for the long haul… especially since we’ve just started building our first _s theme for gamefroot.com – which is coming soon to an interwebs near you 😛
Awesome, Dan. Let us know how it works out and when it goes live!
Why you remove this code
I think this line important to get a unique ID’s for IE ?
We no longer support IE6 and 7 in new themes (and I don’t think anyone should as a blanket principle) so it didn’t make sense for it to remain there. In the rare cases where you need to target IE8 in your CSS it’s easily added back in.
Some nice additions to Toolbox here. Great work.
Q: Did the basic responsive setup not make the cut? I don’t see any responsive-ness built in to _s….unless I’m missing it somewhere.
It’s in there in the fluid layouts and the responsive menu script but there could be and likely will be more. I’m just really conservative about throwing in a bunch of arbitrary breakpoints and calling it an improvement to responsive theme development.
Checking it out now.
Great! I’d be interested to see a derivative of this combined with Twitter Bootstrap as well.
I didn’t see anything that would register and enqueue the supplied css layouts, not even commented out as you did for template tags, tweaks and theme options… I had to add it manually to check the layouts out. I guess more elaborative instructions would help on how to start. I also noticed there are no page templates to select from within the page editor, so they should be created separately with appropriate headings/names.
Otherwise great start! I hope you guys stick with it for the future default themes and may be even push it as desired clean slate for building a theme for Theme Directory submissions. This way you’ll definitely have enough case studies to polish it out as well as receive help from the community 🙂
The current exclusion of a method for including the sample layouts (and the exclusion of page templates) is intentional. It’s meant to be really light. That said we might have something neat to do with that in the future.
I just found out about this theme from Dan Milward’s tweet. It’s interesting what you have here. Where can I see the demo site? Is this theme available for wordpress.com users? Thanks
The real demo is the code.
It’s not available directly for WP.com users but you will see it in almost all our new themes there.
hehe – thanks for the mention Kate 😉
Great news, thanks Automattic! Just wanted to add a +1 for Twitter Bootstrap and basic starter page templates.
Justin, can you explain a bit more about why you didn’t include page templates? Do you see responsive CSS as the ultimate replacement for page templates?
I’m not sure in what way responsive design could replace custom page templates but my reasoning for not including them in _s is pretty simple. They’re custom and should be created on per-theme, case by case. No reason other than that really.
I am starting to see an interest and need in more designed alternate stylesheets for _s though. It’s something I’ve been thinking about.
Thanks for the new code source. I’ve been looking at TwentyTwelve hecticly for the best features for my new framework, so this should make for interesting ‘reading material’.
I’d like to stay on top of these developments. How can I get more involved?
Cheer and great work btw.
So, if I clone from GitHub, rename each instance of _s with my own name as per the readme.txt, then do a git pull after an update, all my edits are overwritten?
I recommend copying the clone and doing your edits there.
So if you make and edit a copy of the cloned theme, it won’t get the updates, ever. So you’ll never take advantage of them.
This is where I am stuck too. Maybe it is my lack of knowledge on Git. If I clone and create a fork, how I do stay in sync with any updates made to _s ? What am I missing? I want to build on top of _s and not necessarily create a derivative of _s.
Using Git you can merge in the changes you want. If you’re looking for a theme to use as a parent theme, _s isn’t the right theme.
This is what I’m curious about too…
So if I want to build my own theme upon _s, I just clone and build out my style.css and work in my theme options and functionality? Then I merge it in the future _s releases? Or do I fork it, then build upon my fork?
Sorry, I am new go versioning and git. Perhaps I need to find more tutorials… if anyone has links to WP + github related tutorials I would love your face forever ❤
The small-menu script doesn’t seem to work for me. When i manually reduce the size of my Chrome (v.18-beta) window to below 600px the pages dissapear and the ‘menu’ button appears, however whien i click it, it doesn’t work. Also when i visit http://underscore.wordpress.com on my iPhone, the link to ‘about’ is still visible. Just tought i’d let you know.
Sorry, my bad, the about-link i tough i was seeing was actually the header of the about-page. Mea culpa… The comment about the menu-button not functioning after resizing Chrome still stands though! On further investigation, it seems
$( this ).toggleClass( 'toggled-on' );gets triggered 4 times in this scenario when the
Thanks, Jim. I’ll check it out.
It’s working correctly for me in Chrome but the menu toggle is a little buggy until it gets some styling on it. Let me know if you’re still running into issues with it.
@Ian- I’m experiencing the same problem on chrome, my cursor turns to a pointer but the menu does not toggle unless i refresh the page at under the 600px.
Thanks for the feedback. Are you still experiencing it when it’s styled (with padding, etc.)?
@ian, thanks for all the help you give for free.
Regards from Catalonia!
Gee, thanks Ian… you’ve just made more work for me, because I immediately want to rebuild my own starter theme with all the stuff you’ve put into this one. So thanks a lot for putting enough into this one that I can’t put off rebuilding my own starter theme. Yeah. Thanks.
Cloning to my mac. 🙂
I am totally interested in the progression of this new Starter Theme for Automattic AND the upcoming Twenty Twelve default theme. What are the chances of seeing the integration of “Adaptive Images” into the core of WordPress?
Good question! If you have some ideas trac is the place to take them.
Hi Ian, this is absolutely fantastic. I’ve given _s a cursory glance so far, love what I see, and will definitely be using it as a base for my next theme to give it a proper go.
Looking forward to seeing what things make their way in (and out?) as time goes on too!
Thanks! (There better be some things coming out — there’s always something to trim.) 🙂
Just watched the project on GitHub. It’s very interesting when WP.com jumps into the theme starter battle :D. There’re many of them over there, but I want something well documented, WP focused and good coding style (standards + practices). I found that in TwentyTen + TwentyEleven and really exciting about the _s. Definitely will use it for my themes!
Taking a look at it, and noticed this in the readme:
1. Search for _s inside single quotations to capture the text domain.
2. Search for _s_ for to capture all the function names
3. Search for _s with a space before it to replace all the occurrences of it in comments.
I realize there are lots of ways to do search/replace.
Here is one way (tested in cygwin):
perl -pi -e "s/'_s'/'mytheme'/g;s/_s_/mytheme_/g;s/ _s/MyTheme/g" $(find . -name '*.php' -o -name '*.css')
This is very handy, +1 for winning.
Thanks! I was looking for a starter theme as mine was out-dated as well.
I will use my short vacations on interpreting the theme, think that is a big step on WP.
Thanks guys! Loved toolbox, but really can’t wait to play with this one!!
Wow. Amazing. Just what I was looking for. I tried some frameworks first, but then I came at themeshaper.com and found this _s! Thank You Ian. 🙂
Sorry if this is a dumb question but I don’t really understand the licence terms. The licence seems to say that I can do whatever I want as long as I let other people redistribute my modified version in any way they want too. So, can I use this as a basis to create a commercial (for profit) theme? Thanks!
Yep! It’s the same license all the best commercial theme guys (StudioPress, WooThemes, Theme Foundry, Press75, etc.) all use. Do what they do and you’ll be doing it right.
Still a little confused by this. If we use this as a starter theme which we then build a custom theme off of and sell on themeforest, people are only allowed to use the theme which we created on one website (per themeforest license). Is this ok, because it sounds a little different than “as long as I let other people redistribute my modified version in any way they want too”.. they can’t redistribute a theme they buy on themeforest.
If it was MIT license I would understand, but the GNU license is a little confusing when you are selling a theme.
You can do whatever you want with _s as long as you continue to let other people do whatever they want with what you build and distribute with it. The MIT license and the GPL license are compatible.
Hey and BIG THANXX for this new blank theme!
…but i wann build a 3 column layout (sidebar content sidebar). But when i code this i never get a tertiary div….. even when i try the samples, i dont will got any success!..
how i have to do this???
greetz from berlin/germany!!
You’ll have to add your own extra sidebar in sidebar.php. Something to note in the documentation!
hey, lets try this! thx dude!!!
Loving _s, and building a new theme on it has been great!
I’ve never seen
comment_form()before, and the codex doesn’t make the use of this function much clearer – how does one best go about customizing the comment form now?
Otto has a great write-up on comment_form().
*Citations needed.* xD
Hey, next dumb question XD…
whem i rename “” in my own like “”, the loop and the admin bar disappear??? i renamed every other “_s”, but this gets an error. what im doing wrong???
That sounds pretty weird and it’s hard to debug via comments but I’m guessing that you did an incorrect find and replace. Check out Getting Started With the _s Theme.
Oh yeah, I think this too! But here, I have only design standard adobe package… without the dreamweaver I love so much 8D.
I did it with aptana studio and there, you cant search and replace at the whole project. This isnt cool! I’ll try it, when I’m back home for sure!
Big up to you for your personal support! Go on!
Check out some free code editors like Fraise or Text Wrangler.
Do you folks have a guide to creating a new theme using _s as a starter? I’ve been hand coding sites with html and css for ages using MovableType as a CMS (not using themes) where I’d build a site from scratch with my own css class and ID structure, and then I’d insert MovableType code into the finished html page templates. I understand how WordPress works, but I’m baffled by all of the built in css structure (classes and IDs already defined by the system rather than the site designer, which I guess explains the need to reset css. Reseting css on a page that’s being loaded seems like such an odd practice).
I’d really like to use _s, and I’d very much like to find a step by step guide if one exists. I assume I have to do more than search/replace _s and then style the pre-existing style.css, yes?
Yep. We have a guide here. There’s really nothing to it beyond changing the name and building your design out.
Ian thanks for posting the link to Getting Started with _s. I did read the readme and thought, ‘you’re on your own now Val!’
I just started using ‘Toolbox’ yesterday for my first time in a new site I’m developing when I realized you have launched ‘_s’. I have a couple of newbie questions:
– Should I modify _s or create a child theme ( with other themes I always have done the second). Pros and cons?
– Is there anything for what Toolbox is better than _s?
_s is made for modifying so go ahead and do that. That also points to Toolbox’s strength: if you want to use it as a parent theme, go for it, it won’t be changing much.
I’m LOVING _s! I started learning WordPress last year by dabbling with finished themes, but that was frustrating. I’m learning so much more, and so much faster, by creating my own theme with _s.
Question: Is there a reason for the “main” div that begins at the end of the header and ends at the beginning of the footer? I feel like I’m missing something obvious. It seems like “main” only contains the “primary” div, but I’m not sure why.
Glad it’s helping, Rob! To be honest, the main div is a little crufty but it can come in handy with the occasional design and, in my opinion, a good little div that helps the code look better when I’m inspecting it in the browser. That said, I might get rid of it one day and you certainly can too if you’re not using it. In fact, I encourage it. 🙂
Great share, I’ll be sure to use this on my next project 🙂
Ian, I just came across this on my way to the Thematic guide. My question: is there any relation at all to the Thematic project here?
There’s a few of us Thematic users that are looking to see the project continue and grow. Part of the community is taking an active role in that. Is _s the answer to our concerns?
Hey Rob. No relation except that they’re both themes that attempt to give you a leg up on theme creation. If I was going to rebuild a theme framework from scratch — or if you wanted to make your own — I would start with _s.
Is it that I should’t make it a parent theme, and my own a child?
Is it the only way through?
That’s not the only way but it is what _s was built for.
Excuse me, I’m a newbie, maybe my question is stupid:
how about when you update “_s”? Then won’t I become crazy to update my sites made starting upon “_s”?
(I’m sure you’ll care about that, but you can say somethign that soothes me from now).
I’m curious – what editor/IDE are you using for the CSS work (and in general)?
Looking at the pattern of the comment headings in the CSS suggests that there’s something nice going on in your dev environment..
We all use different editors at Automattic but I use Textmate. I have that pattern saved as a custom snippet in Textmate.
I am having an issue with all the drop down menus falling behind text. This is also present in the demo link you posted earlier. Can you please fix that? I would appreciate it greatly.
We’ll take a look at that.
Here is a good question that I was waiting for someone else to ask:
Does it automatically add some useful classes to posts and pages like the famous Thematic framework?
Yep. All good themes should be doing that now and most are thanks to the core body_class and post_class functions.
Is it a good idea to create a child theme with it? (Thematic theme as parent?)
Comments are closed.