Automattic Launches Components with 5 New Starter Themes Based on Underscores

components

Automattic’s 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 use cases. These include a classic blog, modern blog, portfolio, magazine, and business theme. The new Components website lets theme authors download a theme that includes reusable components tailored to each theme type.

components-portfolio

Each theme includes general layout structures and templates to support the specific type of theme. For example, when you select the ‘Portfolio’ starter theme, your download will include the following:

  • 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

There’s not much to see once the theme is installed, because it’s just a starting point designed to save time when building layouts and templates. Automattic’s theme team used its collective knowledge of developing hundreds of themes in order to create these five starter themes with the bare basics required for presenting content via these five major theme categories.

Components was inspired by the community behind Underscores, according to Automattic theme wrangler David Kennedy. Developers using the starter theme often offered contributions that were beyond the scope of a simple starter theme.

“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,” Kennedy said. “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.”

The project’s goal is to provide a “more modular, pattern-based approach to theme development.” Even if you’re not building with Underscores, many of the theme components included in this project can be easily reused elsewhere as theme building blocks. The components library is open source and available on GitHub for anyone to fork.

18 Comments


  1. There was a 3:1 girl to guy ratio for the team that built this. The “get women into tech” initiative seems to be working. Just an observation.

    Report


  2. It would be GREAT if Automattic would fork a second branch of this into a WordPress.org Theme Builder for end-users !

    Report


    1. These are starter themes. They’re more opinionated than your average starter themes, but they’re still unfinished so having them in the WordPress.org directory wouldn’t make much sense. They’re meant for designers, developers and those who want to build their own theme.

      Report


      1. I don’t think Shapeshifter 3 was suggesting putting them in the dot org theme directory, but instead creating an official WordPress.org theme builder.

        Report


      2. Thank you Ryan,

        You are exactly correct. I view this as a beginning foundation in creating an Official WordPress.org Theme builder. The end user would simply choose which Type of theme he/she desires, and then uses a more full-options panel in the Theme Customizer to fine-tune to their personal taste.

        All-the-while adhering to WordPress standards based upon Underscores.

        Report


      3. Another advantage to creating an Official WordPress.org Theme Builder:

        1. WordPress.org added 910 New Themes in 2015: https://wptavern.com/wordpress-org-added-910-new-themes-in-2015

        2. The current train of thought within Automattic is to to create very specific, niche oriented themes, with the least amount of Customizer options, to provide simplicity in setup for end- users: http://themeshaper.com/2016/01/08/themes-and-user-experience/.

        3. IF that continues, the total amount of themes that populate the WordPress.org Theme Directory will reach much larger numbers. As of today, we’re currently at 2,182.

        4. While the goal of making it easier for new users to set up their own theme through the Customizer will be attained; FINDING A THEME by sifting through the Theme Directory will take more time, and become more difficult for someone that has a concrete idea of what he/she wants (particularly with the recent increase in “Lite” Theme submissions that keep popping up with their own limitations).

        5. The Theme Directory’s Feature Filter could be improved by replacing the “Subject” column with “Type” (mirroring what Components provides).

        6. Since a new user would still have to sort through 2K-3K-4K-5K themes to find exactly what he/she wants…a single Official Theme Builder would be much quicker.

        Report


  3. Wonder why they don’t offer the _sassify option on the components?

    I want the _sassify!

    Report


    1. Edit:

      Sorry, they do, but it’s structured differently. Wonder why? Why not keep everything in the sass folder and add to the existing _’s structure?

      Report


  4. Great stuff! :) Hope they’ve some WooCommerce support too

    Report


  5. Do the extra pieces of functionality require Jetpack, or am I misreading that part of the description?

    Report


    1. The only bits that require Jetpack are the Jetpack specific functionality that any theme can have they just have to switch on. This includes portfolio custom post types and other goodies. The types do not require Jetpack to work.

      Report


    2. Yes, they do. But you can still use theme components building blocks as a basis to write your own theme with custom post types, etc. and set it to work independently.

      Report


      1. Hoa,
        Thanks, that’s good to know. I’d rather not use Jetpack for just a couple bits, so I’ll just make my own custom post types.

        All in all, I think this is a very nice idea. A base for a variety of general site types, yet without the bloat that comes with trying to code for non-developers.

        Report


  6. Thanks for components underscores! Is there a step by step tutorial on how to create a working blog theme from the magazine component? I haven’t found any Components tutorials online.

    Report

Comments are closed.