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
<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.
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.
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.)
Once you activate _s, the first thing you’ll notice is that it’s the most boring theme you’ve ever seen.
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.
The style.css file in _s is well-organized and formatted. It breaks down styles into 12 sections:
- Navigation (Links & Menus)
- Content (Posts and pages, Asides, & Comments)
- Infinite scroll (Optional)
- 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.
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!
10 Top WordPress Ecommerce Themes for 2021
By Monique Danao,
With WordPress themes, you can build a great ecommerce site without being a designer or coder. Here are ten top WordPress ecommerce themes.
How to Use WordPress as a Headless CMS for Eleventy
By Craig Buckler,
You want to offer static-site benefits to clients, but they want WordPress! Learn how to use Eleventy with WordPress to offer the best of both worlds.
Creating a WooCommerce Store on the Cloud in 10 Minutes
By Shaumik Daityari,
An eCommerce store enables businesses to reach a larger market. In this tutorial, we explain how you can create an eCommerce store with WooCommerce.
James is a Senior Front-End Developer with almost 10 years total experience in freelance, contract, and agency work. He has spoken at conferences, including local WordPress meet-ups and the online WP Summit. James's favorite parts of web development include creating meaningful animations, presenting unique responsive design solutions, and pushing Sass’s limits to write powerful modular CSS. You can find out more about James at jamessteinbach.com.