Building a WordPress theme with SASS and _s – setting up

Call me crazy, but I’m about to make a WordPress theme from nearly-scratch, using Automattic’s _s starter theme.

_s is a bare-bones theme that comes with minimal styling, no grid system, and pretty much no opinions on aesthetics at all. Out of the box, it looks like the web in 1995.

Homepage on the _s theme

Not so far off from looking at a web page in NCSA Mosaic, one of the first browsers.


Bootstrapping WordPress

Getting a local installation of WordPress is easy and free. Here are the instructions for a Mac:

  1. Download MAMP
  2. Download WordPress, and place it in a directory on your hard drive
  3. Point MAMP to your WordPress directory
  4. Set up a database in MAMP, by clicking the Webstart button in MAMP, clicking PHPMyAdmin in the navigation, and creating a new blank database
  5. Go to your root site in MAMP
  6. Set up WordPress through the easy wizard, using your new database name and root as the user

There are better tutorials on bootstrapping WordPress, but it is of course an essential first step.

Once you have WordPress up and running, drop your unzipped _s theme to wp-content/themes as its own folder. Mine is wp-content/themes/corey.

Next, select your theme in the WordPress admin interface’s theme chooser. Now, f you go to your local WordPress site, you should see something similar to the screenshot above.

Time for SASS

Clearly, there is a lot of CSS styling to do here. Automattic began offering a SASS version _s, which we will use.

Never heard of SASS? It’s a CSS pre-processor (in other words, you write SASS and compiles into CSS) that lets you write styles in a more concise and organized way.

To get the SASS version of _s, select Advanced Options on the _s site, and choose “_sassify!”

Download the SASS version of _s

SCSS compiles to CSS. That is, you edit SCSS files, and they become CSS files. How does this compilation happen in WordPress?

For that, we turn to a glorious plug-in called WP-SCSS. Install it on your local site.

Specify these settings, specific to _s, in your WP-SCSS settings:

SCSS Location: /sass/
CSS Location: /

Multiple commenters have noted the correct SCSS location is /sass/, not /scss. Corrected above. Thanks!

This tells WP-SCSS to take _s’s SCSS files and convert them to CSS files in the theme’s root directory. For _s, this means take a bunch of SCSS files and converting them to style.css in the theme’s root.

Open your theme folder in your favorite text editor. I’m using Sublime Text.

Go to your _headings.scss file under /sass/typography within the theme.

Style tree in the _s theme

I added color: red to the file, so it would show up like this:

Check out your WordPress site now. The headings are red! In the background WP-SCSS compiled _s’s SCSS files to style.css, which is shown in your browser. Seamless!

Headings shown as red on WordPress site homepage

We’re at the tip of the iceberg. Next we’ll jump more into styling our site, then comes structure, and… a lot more.

Follow me on Twitter, subscribe by RSS, or subscribe to our mailing list below to get updates on this series. brings Rails job offers to you. Free for candidates. Salaries from $75,000 to $250,000. Sign up now!

4 thoughts on “Building a WordPress theme with SASS and _s – setting up”

  1. Great write-up. I, too, am diving into _s, hoping to find myself a new theme development workflow. I’m delighted that _s now incorporates SASS.

    One minor suggestion, if I may. I believe the settings should point to the SASS folder, as there is no SCSS folder in the _s theme file structure. The configuration would look as such: SCSS Location: /sass/

Leave a Reply