Underscores Theme

Creating Themes with Underscores

To start, let's make a very simple Underscores theme that does not use SASS. This will allow us to gain a better understanding of WordPress themes in general before getting involved with the other tools.

My First Underscores Theme

For this example, we're going to create a theme named "Awesomesauce".

1. Visit Underscores' website http://underscores.me/ and find the text box named "Theme Name" next to a button named "Generate".
2. In the Theme Name box, type Awesomesauce, then click Generate. This will download your newly generated theme as a zip file.
3. Extract the zip file to your desktop for now.

We have created a new theme! Next, let's take a step back and explore the VVV and WordPress files a bit, so we know where to put our new theme.

Exploring VVV

• Using your computer's file manager (Explorer / Finder), browse to where you extracted VVV.
• In the VVV folder, you'll see about a dozen files and folders. The only one we'll ever worry about is www. Open the www folder.
• Now in VVV\www we have another few folders. For this series the only one we're going to work with is wordpress-default. Open the wordpress-default folder.
• This is the folder we're going to work in: VVV\www\wordpress-default.

Next, let's take a quick look at the WordPress file structure.

Exploring WordPress

• In the root of the WordPress folder there are 3 main directories, and about a dozen files.
• The only file we'll ever worry about here is wp-config.php. But, since VVV set this up for us, we can ignore it all for now.
• The only folder we'll concern ourselves with is the wp-content folder. This folder is where WordPress keeps plugins, themes, and file uploads. Go into the wp-content folder.
• Go into the themes folder.
• Now you should be at: VVV\www\wordpress-default\wp-content\themes. This is where we will put our newly generated theme.

Installing Your New Theme

• Copy your newly extracted theme named awesomesauce into this folder, so that the index.php file for your theme can be found at this path: VVV\www\wordpress-default\wp-content\themes\awesomesauce\index.php
• Login to WordPress at http://local.wordpress.dev/wp-login.php with the credentials admin and password.
• In the dashboard visit Appearance, and you should see the Awesomesauce theme. Activate it.

You now have a working WordPress theme! No one said it was going to be pretty. In fact, quite the opposite. This is a completely blank theme, so it should have practically no style at all.

Spend some time exploring the theme files a little bit. Specifically, open style.css and look at the comments at the very top. These comments control the information about the theme itself.

/*
Theme Name: Awesomesauce
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description

If you change the Theme Name or Description here, it will change the name in the WordPress Appearance section.

Next Page >> WordPress Theme Structure At A Glance