WordPress Theme Development: Getting Started with Underscores (_s)

This article is for developers who build custom WordPress themes. There are times when buying a premium theme or modifying it with a child theme are fine, but in many situations, there isn’t an existing theme that fits a client’s content needs precisely or that conveys their visual identity correctly.

There are a number of useful blank themes or starter themes available for custom WordPress theme development. Some of the more common ones include Bones, Roots, Joints, HTML5 Blank, and HTML5 Reset. These themes have various levels of built-in styling. Some rely on Bootstrap; others use Foundation. Some include a CSS reset; others simply include normalize.css.

My personal favorite is _s (also called Underscores). It’s a blank theme maintained by Automattic, the company who runs WordPress.com, Jetpack, Akismet, and Gravatar. This ensures that it stays fresh and up-to-date with current WordPress code standards. In fact, at least 30 updates were made just last month.

Not only is _s up-to-date with WordPress standards, it also stays on top of HTML5 standards. Using semantic tags like <header>, <footer>, <nav>, <article>, and <section>, it presents your content as accurately as possible for search engines. Note: if you’re concerned about layout in IE8 and down, include html5shiv in your theme.

Another thing I love about _s is what it doesn’t have. It doesn’t have a grid system, options framework, or JavaScript library. In other words, it doesn’t have bloat that I’ll have to trim later. The only styles it has (besides a reset and navigation) are the ones I choose to add. I understand that plenty of people rely on CSS frameworks to speed up development, but I’d rather invest the necessary time in development and speed up the site!

Downloading and Installing _s

You can download _s at underscores.me. The page first offers you a single field: choose the name for your theme. I recommend clicking the “Advanced Options” link and adding a theme slug, author name and website, and description. These values will be added automatically to the theme comments at the top of style.css.

Download Underscores

You’ll be given a .zip file containing your theme files. Upload it to your site using Dashboard -> Appearance -> Themes -> Add New -> Upload Theme, then activate it like normal. Its screenshot is just a checkered pattern. (I asked about uploading your own screenshot.png in the Advanced Options when you generate the theme, but the answer was no.)

Basic Styling

Once you activate _s, the first thing you’ll notice is that it’s the most boring theme you’ve ever seen.

Default Underscores Style

Everything is your basic 16px sans-serif. There are no margins; there’s not much padding; it pretty much just dark gray and blue. And that’s a good thing! This is meant to be simply a base for you to build from, not a client-ready template.

CSS Structure

The style.css file in _s is well-organized and formatted. It breaks down styles into 12 sections:

  1. Reset
  2. Typography
  3. Elements
  4. Forms
  5. Navigation (Links & Menus)
  6. Accessibility
  7. Alignments
  8. Clearings
  9. Widgets
  10. Content (Posts and pages, Asides, & Comments)
  11. Infinite scroll (Optional)
  12. Media (Captions & Galleries)

This makes it easy to start adding your own styles to an already-organized file right away. It also makes it pretty simple to break this file down into several partials if you’d like to use Sass or another CSS pre-processor to maintain your CSS for your custom theme (that’s what I’d do). Or if you prefer, there are some Sass-ready forks of _s available on Github.

Template File Structure

_s carefully follows the WordPress template file naming convention. Your basic template files are index.php, archive.php, page.php, and single.php. These each use the get_template_part() function to call the appropriate partial files (like content-page.php or content-single.php). You’ll also find standard WordPress files like header.php, footer.php, and sidebar.php in _s.

Underscores File Structure

This clean organization system sets a maintainable pattern for developers to follow. If you were to add a custom post type called Staff for a company, you’d create archive-staff.php to display all the Staff and single-staff.php for an individual members. Those pages would call content-staff.php for content. If you need to call different content for archive vs. single, you could use the is_post_type_archive() conditional test inside content-staff.php to serve different versions of the content for different views.

Conclusion

I highly recommend trying _s the next time you need to develop a custom theme from “scratch.” It’s licensed under the GPL, so you’re free to do what you like, including developing commercial themes based on _s. The theme is cleanly coded, meets modern standards, and doesn’t include bloated frameworks or styles.

If you’ve used _s for an awesome theme or have a different blank theme that you love, please let us know in the comments!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • laracraftmili

    Start working at home with Google! It’s by-far the>>CLICK NEXT TAB FOR MORE INFO AND HELP

  • Tahir Taous

    I have used bones and underscore, Underscore is very good theme but For beginners it can be difficult to start.
    It will take some time to understand how to use underscore theme.
    I use bootstrap’s grid system to make underscore base themes responsive and it makes theme development process simply, easy and quick.

  • Larry Kagan

    Excellent timing! I didn’t know these themes existed. I was about to build a starter theme with bootstrap this weekend but not need now!

  • Cherif BOUCHELAGHEM

    Keep calm and use _s starter theme, options framework and Bootstrap

  • Cherif BOUCHELAGHEM

    To make theme styling more modular I use less with bootstrap, so the organisation with _s:
    /less
    bootstrap/
    Typography => typography.less
    Elements => elements.less
    Forms => forms.less
    Navigation (Links & Menus) =>navigation.less
    Accessibility => accessibility.less
    Alignments=> helpers.less
    Clearings=> helpers.less
    Widgets=> widgets.less
    Content (Posts and pages, Asides, & Comments) => layout.less
    Infinite scroll (Optional) => helpers.less
    Media (Captions & Galleries) => media.less
    responisve.less
    variables.less
    custom-mixins.less
    style.less (where modules are imported)

    The use of bootstrap mixins to have semantic ids and classes