One of the most common beginner comments I see around the interwebs regarding WordPress is “How do I create a theme” or “I have HTML/CSS knowledge and want to build my own theme”. In this series I’m going to show you my process for how I build themes using _s, Grunt, Sass, and Browsersync.
Let’s get started
I’m going to assume that you have some knowledge of development (i.e. HTML/CSS/PHP/JS). In Part 1 we’re going to go over how to create, organize, and setup your theme for development.
Underscores is an ultra-minimal theme meant to be a starting point for your theme. There are many ways to generate an _s theme but the easiest way is to go to their site and use the tool.
For this tutorial, let’s use the theme name “Scratch”. Head over to underscores.me and type “Scratch” into the Theme Name field. This will generate a .zip package for you. Unzip the package to the
wp-content/themes/ directory in your WordPress site.
Your directory structure should look like the following:
At this point, I like to delete anything that won’t be used and move files to a more organized structure. This can be subjective because everything in the package can be used but since I’m showing you my process, lets delete and move the following files.
- Create a directory called
assetsand move the
jsdirectory into it.
- Create the following directories within
Your directories should now look like the following:
Since we’ve moved the js files, we’ll need to update where they’re called. Open
functions.php and edit lines 119-121 to the following:
wp_enqueue_script( 'scratch-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '20151215', true );
wp_enqueue_script( 'scratch-skip-link-focus-fix', get_template_directory_uri() . '/assets/js/skip-link-focus-fix.js', array(), '20151215', true );
/inc/customizer.php and edit line 24 to the following:
wp_enqueue_script( 'scratch_customizer', get_template_directory_uri() . '/assets/js/customizer.js', array( 'customize-preview' ), '20151215', true );
At this point your theme should look like the following:
There are a few extra things you can do like update details in your
style.css, add your own screenshot.png, and update details in the readme.txt but for this tutorial, I’ll leave that up to you.