These screencasts pick up after you've set up your environment, set up your wp-config.php file, and run the WordPress installation. For instructions on how to do that, specifically via the command line, click here.

Using MAMP to Complete the WordPress Installation

Open the MAMP start page, and then head over to phpMyAdmin. Click on the Users tab, then scroll down and click Add User. Create a memorable username, strong password, and set the host to localhost. Check Create database with same name and grant all privileges, then click Go.

Now, navigate to the host you configured in MAMP. Complete the WordPress installation and log in. (You won't need to do this specific part if you ran wp core install.)

Using MAMP to Complete the WordPress Installation

Once logged in to WordPress, navigate to Appearance > Themes and activate Scratch. Follow the subsequent prompts to install the recommended plugins. If you want, delete Akismet and Hello Dolly.

Activating Scratch & Installing Recommended Plugins

Running Grunt, BrowserSync, and Compiling SCSS and JavaScript

Run npm install in the assets/grunt/ directory from your command line to install all of the Node packages. Make sure to change your proxied host for BrowserSync. Once that's done, you can run grunt from the same directory to begin your automated workflow.

Update: as of v1.5.9, Gulp is also available. Run npm install and then gulp in the assets/gulp/ directory.

Running Grunt, BrowserSync, and Compiling SCSS and JavaScript

Adding Scratch's Style Guide and Main Navigation Menu

Navigate to Appearance > Menus and click Create Menu. Make sure the menu points to the Main Nav location, and then save it again. Next, go to Pages > Add New and set the Page Template to Style Guide. Publish and view the page.

Update: as of v1.6.8, the pages and navigation menu are automatically generated on theme activation.

Adding Scratch's Style Guide and Main Navigation Menu

Implementing Your Own Typography with Scratch

This example uses Google Fonts and sets them to SCSS variables in config/_variables.scss.

Implementing Your Own Typography with Scratch

Implementing Your Own Color Scheme with Scratch

Edit config/_variables.scss and page-style_guide.php.

Implementing Your Own Color Scheme with Scratch

Basically, root/ contains files that should be moved to the root of your site if you desire to use the configuration that comes with HTML5 Boilerplate.

Navigate to Settings > Permalinks, and change the Permalink Structure to Post Name for cleaner, SEO-friendly URLs.

Moving the Right Files to the Root of Your Site & Editing the Permalink Structure

Congratulations!

High fives, you're all finished! If you're having trouble, feel free to submit an issue on GitHub.


Next up: CSS