WordPress Theme Development: Getting Started with Underscores (_s)

By James Steinbach
We teamed up with SiteGround
To bring you the latest from the web and tried-and-true hosting, recommended for designers and developers. SitePoint Readers Get Up To 65% OFF Now

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 Sassready 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.


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!

We teamed up with SiteGround
To bring you the latest from the web and tried-and-true hosting, recommended for designers and developers. SitePoint Readers Get Up To 65% OFF Now
  • 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.

    • Christian Nikkanen

      Weird, I found bones more difficult to use.

      • Yes getting started with bones is difficult, but after spending few hours you will learn how to use bones to build themes.

        Now i would highly recommend to build child themes using bootstrap css. I have created child theme for my blog http://tahirtaous.com/ i have used bootstrap css for child theme styles.
        2012 is parent, you can see child theme is completely different from parent theme.

  • 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!


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


    To make theme styling more modular I use less with bootstrap, so the organisation with _s:
    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
    style.less (where modules are imported)

    The use of bootstrap mixins to have semantic ids and classes

  • RanM

    Iv’e been using _s for a long time now, and love it. However, it’s important to note that _s is not meant to be the basis for child themes. The idea is to make your changes and updates directly to the version you downloaded. This could also be regarded as the down side of _s, as you cannot upgrade to a new version once it becomes available.

  • David

    Hi Mr James, thanks for this tutorial.

    I am about to create a wordpress theme with Underscores and just wondering which would be the best way to do this?

    Bootstrap or Foundation or Blueprint? Or should I just build on the _S css (dont want to do this?)

    If possible, what is the original intention of the Automattic team. I read a recent post on their website that says Bootstrap is not the best option.


  • WebDesigner

    This is my Underscores-based theme. No framework is used during development. :)

  • Christian Nikkanen

    I’ve used bootstrap, and nowadays I hate it. I just started using undescores and got it pretty much figured in about 2 hours.

  • santosh89


    Can i use bootstrap in wordpress theme development

  • Brad

    So how do we actually build something with it? This theme has no bootstrap grid, no typography, nothing. Hardly a timesaver to implement the most basic things.

    • Mike

      Hi, You have to integrate Bootstrap CSS into Underscores theme. You then build a base theme which you use to build various other themes. You have to use navwalker.php script to integrate the nav into wordpress. See the Treehouse tutorial for info on this.

      My problem however is that my technical knowledge is a bit limited when it comes to changing the bootstrap nav which I find to be very crap.

      • Brad

        ugh… everything requires something else. can someone please point my dumbass me to something that says how to do that?