We love a good starter theme. Since launching Toolbox and its popular successor, Underscores, we’ve always reached for a starter theme when building our next, awesome WordPress theme to get us off on the right foot. With Underscores, we always say it gives you a 1,000-hour start. We get excited when we see someone fork Underscores and make it their own, so it shouldn’t come as a surprise that we’re obsessed with evolving what we think of as a starter theme.
Continuing that journey, we’re pleased to announce Components. Think of it as a toolbox for taking your themes where you want them to go, faster. Forked from Underscores, Components gives you a solid base to work from – but it also takes the starter theme to the next level, offering a choice between five different theme types. Each one adds the code needed for starting a certain type of theme. You can select from:
The Classic Blog
- A two-column layout
- A sidebar with widgets
- Navigation in the header
- A fixed maximum width of 1120px in your style.css file
The Modern Blog
- A single-column layout
- A sliding panel for navigation, social menu, and also widgets
- A large featured image with full-width script
Portfolio
- A portfolio post type, courtesy of Jetpack, added to all the necessary files
- A grid portfolio view
- A single column blog template
- A sliding panel for navigation, social menu, and also widgets
- A large featured image with full-width script
Magazine
- A front page template with featured images in grid a layout, plus a two-column blog
- Layout with excerpts
- A two-column layout
- A sidebar with widgets
- Navigation in the header
- A fixed maximum width of 1120px in your style.css file
Business
- A front-page template with a custom header, testimonials section, and  page content area
- A custom testimonial post type turned on, courtesy of Jetpack
- A two-column layout
- A sidebar with widgets
- Navigation in the header
- A fixed maximum width of 1120px in your style.css file
Why Components?
So why the different approach with Components? Three main things inspired this direction: the community behind Underscores, the people who use our themes every day, and the web design and development community.
While maintaining and improving Underscores, we always see great pull requests from the community that we turn away because the contributions end up being too specific for a normal starter theme. Many of those additions would have been perfect in most themes. Now, some of them have a home in a project that zeroes in on a certain kind of user with each theme it builds. Speaking of users, we know from launching hundreds of themes on WordPress.com that themes are one of the most challenging areas of WordPress for people to understand. They need more themes that “just work,” and we hope Components will help achieve that. Lastly, the web community has embraced building systems, methodically created with the pieces that make up a site. Even some popular libraries have taken this approach. We see Components as the first step to allowing you to make a starter theme that’s just right for your project.
We’re very excited to see what the community brings to the project and are looking forward to evolving Components with your help. Right now, we’re in the early stages of our vision and execution for Components, so expect both repositories that power this project, theme-components and components.underscores.me to evolve quickly and constantly.
Fork or download Components on GitHub or generate your own custom starter theme at components.underscores.me and have fun making awesome new WordPress themes!
ThemeShaper 
20 responses
I’d use the “modern blog” component, and don’t have a header(title, description, etc)
Thanks for the comment!
We made some changes to that type recently, and it now has a site title and description on all posts/pages. If that’s not what you’re looking for, we’re planning on making it easier to add/extend new types in the future. Keep an eye on the project!
Thanks for the response!
I will use this component now.
Congrats from Argentina!
Hi! And thanks a bunch for all the hard work. I’ve been using Underscores for a while now and it has changed the way I create websites with WordPress. I love it!
In regard to Components, do you have plans to include a sass version like the one in Underscores?
Glad Underscores has has helped you! 🙂
Right now, Sass is included in all the theme types in Components by default. I imagine the way we use it will evolve, so if you have suggestions let us know by filing an issue with your thoughts.
We’re not currently compiling the Sass, as we leave that up to each developer. But that could change too. Happy theming!
[…] Automattic’s Theme Team launched Components, a toolbox for taking your WordPress themes where you want them to go, faster. I’m really […]
[…] team of theme developers announced the release of Components today along with a suite of themes that extend the popular Underscores starter theme for specific […]
What an awesome idea, I’ll give Components a try. Thank you so much 🙂
Hi all/David – Thanks for this, Components is a very good idea.
Question = Is Woocommerce supported within Components?
I ask as quite a lot of folks are adding products for sale recently, and having it supported out the gate, as it were, would be a big plus for all developers, I would imagine.
Also, you mention a couple of times “courtesy of Jetpack” : now, I never use Jetpack in my builds (just me, I know its odd), so how would you recommend someone works around that?
Thanks~
Blake
Great questions!
Not yet, but we’ve talked about doing an e-commerce type in the future. It’s a good idea, and one we’re thinking about.
These are starter themes, so do what you need to do. 🙂 You can remove the jetpack.php file from the theme(s), and remove any related CSS, and be on your way.
Hi David
Most Excellent – a Woo supporting version out of the box version I’m sure will be very well received.
Going back to the Jetpack point, is there a specific reason it was included (other than the monetization aspect, Upselling and all) that would make sense to use it, in fact?
I’m just curious on that, as it seems odd to have a “starter” set of theme’s with a Very Specific plugin requirement – y’know?
In my experience with Underscores, Jetpack isn’t a requirement, it’s a recommendation. It features support for the Infinite Scroll feature, which is nice to have in certain cases.
I have yet to check out the Components code in detail but, for example, taking advantage of Jetpack’s Portfolio content type is one of the features that really should give you a head start in theme developing. It saves you the hassle of building a custom post type from scratch if all you need is a portfolio (or Testimonials).
You should really give Jetpack a try, I recommend several of its features: site logo, social menus with genericons, related posts, tiled galleries… all of those save you a lot of time when developing sites for clients, and the plugin’s features are seamlessly integrated with customizer and the WP admin environment in general.
Plus, Jetpack seems to be performing a lot faster and better than it used to a couple of years ago.
We build themes for WordPress.com, which uses Jetpack. Jetpack also has many of the features needed to make the popular theme types we wanted to make. So it makes sense for us to include it. It’s worth noting that _s comes with Jetpack integration as well. We’ve tried to make it easy to remove if you don’t need it. Happy theming!
[…] ThemeShaper: Â Introducing Components: A Toolbox for WordPress Theme Development […]
[…] Components: A Toolbox for WordPress Theme Development […]
Good to Know , If its fully compatible with Jetpack then definitely gonna try the Components .Thanks for this
I think it would be nice to see an online demo of each component, to have a quick glance of the differences (even with little styling), without having to download and install it.
Thanks for the feedback! We probably won’t go down the road of demos, but we are thinking about ways to visually show what components and theme types look like. Hopefully, that will happen in a future iteration.
a gif beside/beneath each type, of that type installed.
as is, each of these different component themes show the same output layout. there seems to be no in-built CSS styling to make them different.