The Beginner’s Guide to Creating a Theme With Underscores

Automattic’s theme division, Theme Shaper, recently announced they will be turning their attention back to the popular Underscores starter theme. Notably, this shift is cited due to the possibilities the new Gutenberg editor brings to future theme development.

Underscores is a starter theme (as opposed to a theme framework) designed to cut down many hours of development time when setting up a new custom theme. Before the Underscores project begins to receive drastic changes, it may be a good idea to familiarize yourself with the project in its current state. If you’re new to starter themes, doing so may help reduce the learning curve.

In this article, we will discuss what starter themes are, introduce Underscores, then show you how to create your first theme with it. By the end, you should feel ready to take your theme development to the next level. Let’s get creating!

What a Starter Theme Is (And Why They’re Awesome)

Outside of building themes from scratch, there are two primary tools used by theme developers to get their designs up and running quickly. These are:

1. Theme frameworks, in which you develop a dedicated child theme designed to run on its parent.
2. Starter themes, where you are meant to completely modify the original theme code and make it your own.

One issue with using frameworks, such as the ever-popular Genesis, is that you’re locked into your chosen framework. This means if development is discontinued, your theme could be rendered obsolete. If you go down this route, it’s important to choose a framework with a thriving community around it, to minimize the risks of ending up with an outdated framework and theme.

On the other hand, starter themes are designed to be modified from the beginning, and are completely standalone. A starter theme is essentially a toolkit, making it as easy as possible for you to get a design up and running without needing to do the basic setup required to make a WordPress theme functional. One great example for when you might use a starter theme is when you’ve created a HTML prototype and would like to simply turn it into a WordPress theme.

Although we’re focusing on Underscores here, it’s far from being the only viable option. Other starter themes include Bones (a mobile-first HTML5 starter theme), FoundationPress (a WordPress starter theme for Foundation), and UnderStrap – an Underscores based starter theme incorporating Bootstrap 4.

Your choice (as always) depends on your needs and development style. Some starter themes are designed to easily incorporate into more advanced configurations, such as the Sage starter theme with Roots. Starter themes are generally optimal if you’d like to build a standalone theme from scratch using best practices. We’ll be focusing on Underscores due to its deep integrations with the Automattic team and the upcoming changes with Gutenberg.

Introducing Underscores

Underscores is the starter theme backed by Automattic’s development team. The goal is to set basic coding standards as a baseline and give developers a head start on making secure themes. It began as Toolbox in 2010, an even more basic HTML5 starter theme for WordPress. For a while, Underscores was the foundation of Components, which now seems to be re-incorporated back into the core Underscores project.

If you want to use a starter theme backed by Automattic and featuring the Sass language, Underscores is a great resource to have. However, if you’re looking for something that comes with extra built-in interface styles, it may not be for you.

A few included features of Underscores include:

• Custom template tags for optimal theme performance.
• Built-in mobile navigation via a JavaScript file.
• Sample CSS layouts to learn from.
• Plenty of documentation comments to guide your way.

Now that you’re familiar with starter themes and the Underscores project, it’s time to build your own theme!

The Beginner’s Guide to Creating a Theme With Underscores (in 4 Steps)

Underscores makes it quick and easy to get your new theme up and running. Let’s dive in and start coding with these four steps!

Step 1: Set Up Your Theme Development Environment

Before doing anything with Underscores, you’ll need to set up your local development environment. This means you can develop on your computer, rather than relying on a hosting server. There are a plethora of tools you can use to create a local development server, and your choice will be down to personal preference. For a simple way to get up and running with WordPress, we recommend DesktopServer.

It can also be worthwhile to check out some of the various development plugins that will help you throughout your project. However, bear in mind that some of the most useful development-geared tools haven’t been updated in a while. However, they usually receive updates about once a year or so to remain relevant.

In the meantime, keep best practice coding standards in mind to ensure your end results are solid. For example, check that you’re properly escaping your data, taking advantage of built-in WordPress functionality, enqueueing your theme’s scripts, and only including code that is vital to the performance of the theme.

Step 2: Download and Unpack Underscores

Downloading a new instance of the Underscores theme is incredibly simple. First, go to the Underscores home page. Next, follow these steps to download a customized version for your new theme:

1. Click Advanced options in the Create your Underscores-based theme section.
2. Fill out as much information about your plugin as you would like, including a theme name and your author name.
3. Check _sassify! if you would like to be equipped with Sass tools in your theme.
4. Click Generate, and save the provided zip file.

In this file you’ll find standard WordPress theme files with minimal styles. Remember, these are intended to be your starting point, not the final product! From here, simply upload and activate this theme in your local WordPress development environment to see the results of your efforts as you work.

Step 3: Create Your Underscores Theme

Underscores has a lot of functionality available under the hood, and at this point the direction you go in will be determined by your project. Even so, here are a few of the basics you’ll want to have a look at initially:

1. Use the header.php and footer.php files to control code wrapping around the content.
2. Add new CSS to the bottom of your styles.css, so that the included Normalize styles help rather than interfere.
3. Refer to the template hierarchy if you’d like to edit the template of a specific page or post type.

As your theme starts taking shape, there are a few extra fundamentals you should be aware about in Underscores. For example:

• The README.md file includes all instructions about what is in the theme.
• Inline documentation is provided in the comments.
• The layouts folder offers example CSS for sidebars.
• The inc folder contains helpful common tweaks via theme functions to improve the header experience, get started with the WordPress customizer, and add Jetpack support.

What’s more, WordPress.org has provided an entire handbook for theme development to help you along your way, and you can also find theme-specific functions at the WordPress.org codex.

Step 4: Test Your New Theme

If you are interested in submitting your theme to the WordPress.org Theme Directory, or otherwise want to meet WordPress’ standards, it’s a good idea to become familiar with their testing protocols. There’s an entire team dedicated to reviewing themes for thoroughness, security, and coding standards.

While there are accessible rules for the review process, you can also use some tools that help you check your code to save you some time:

• Theme Unit Tests are a data import with lots of edge cases to see how your theme performs with unpredictable data.
• The Theme Check plugin automatically checks your code against WordPress’ theme review standards, and provides a report on what to fix.

In general, there are a few guidelines to follow when reviewing your own theme according to WordPress’ standards. Some of the most important ones include:

1. Respect the provided WordPress PHP standards.
2. Keep your theme files organized. Underscores has already given you a head start!
3. Adhere to the template hierarchy.
4. Localize your theme so it is translation ready.

By using the Underscores starter theme, your code will already be based on acceptable WordPress.org standards. All you need to do is ensure your new design continues to follow these rules!

Conclusion

Underscores is a popular starter theme provided by Automattic, to help ensure consistency between custom WordPress themes. As the project may soon be expanded to add specific Gutenberg editor support, it’s a good idea to become familiar with how to use it to build themes.

You can build a theme with Underscores by following these steps:

1. Set up a local development environment.
2. Download and become familiar with the Underscores files.
3. Create your custom Underscores WordPress theme.
4. Thoroughly test your theme using WordPress’ review standards.

What questions do you have about getting started with Underscores? Let us know in the comments section below!

Image credit: Goran Ivos.