Combining Underscores With Bootstrap to Create a Theme Framework: Introducing Underscores
This tutorial is the second in the series Combining Bootstrap and Underscores to Create
Your Own Theme Framework. In this tutorial, we are going to introduce you to
one of the main components of the framework: Underscores (_s).
Underscores (_s) was designed to serve as a
base/starter theme by the WordPress.com Theme Team—the people responsible for
the design and development themes that ship with WordPress. It is a culmination
of the lessons learned and best practices garnered from building themes used by
millions of people all over the world.
As a "developer-only" starter theme, Underscores (_s)
is not meant to be used “as is” but to be tweaked, hacked, styled, and improved
upon. It is meant to provide a foundation upon which you can build your own
being released on GitHub on 21 Jan 2012, Underscores (_s) has:
- had 660+ commits
- amassed 80+ contributors
- been starred 3,900+ times
- and forked 1,395 times (and counting)
A Closer Look at _s
Underscores (_s) has the following directory structure:
- just the right number of lean,
well-commented, modern, HTML5 templates
- a helpful 404 template
- custom template tags in
inc/template-tags.phpthat keep your templates clean and neat and prevent code
- some small tweaks in
that improve your theming experience
- a script at
your menu a toggled dropdown on small screens (like your phone, ready for CSS
- two sample layouts in
- smartly organized CSS in
will help you to quickly get your design off the ground
- support for SASS, a CSS preprocessor
- supports internationalization (i18n)
Underscores (_s) is built by a team of
developers responsible for the development of themes used by millions of people
from all over the world. It is also backed by one of the biggest names in the
WordPress community, Automattic.
By providing a "base" upon which you can
build, Underscores eliminates the need to keep writing the same code
over and over again. This saves you a
lot of time as a developer and enables you to focus on the actual process of
writing themes instead of wrestling with code.
Underscores is compliant with WordPress
Coding Standards. Using a standards-compliant theme such as Underscores as a
base for your theme ensures that anyone will be able to understand and modify
Underscores follows and implements best
practices in theme development and general web development. This enables you as
a developer to use it to create themes that take advantage of the best features
The HTML5-compliant templates that _s
produces increase the compatibility of your themes with (older) web browsers.
Architecturally, _s was designed to be
lean. It contains just the right amount of functionality, markup, and styling.
This makes it simple enough to merge with other systems, libraries, and
The number of times that _s has been
forked on GitHub is testament to its
How to Download _s
There are two ways to download _s:
To download _s from GitHub, visit the GitHub repository and hit the download button.
This option is arguably the better one of
the two, as it enables you to modify your theme’s name, slug, author, author
URI, and description. This enables you to easily make _s your own.
To download your customized version of Underscores
(_s), go to the Underscores website,
enter your theme name and hit the Generate
In this tutorial, we took a look at Underscores
(_s), a popular WordPress starter theme created by Automattic. We looked at the
features of _s and the advantages it affords the theme developer.
Beyond introducing _s, this article was meant to build
the case for why we will be using it as a main component in the theme framework
that we're building in this series.
In the next article in the series, we will have a look
at Bootstrap, a popular mobile-first front-end framework created by developers at Twitter.
Source: Tuts Plus