The Underscores (_s) theme with Sass and Gulp Part 1: install Underscores and environment

Untitled Document

************************************************************************

The Underscores (_s) starter theme is suitable as a parent theme for making chlid themes. Why:

  1. First of all, they're little themes available for WordPress that have gone through more code reviews than the Underscores theme
  2. Second, they use the latest features that are available for WordPress, so they have all the cool features builtin already and they are easy to hook into.
  3. And third, the Underscorea theme wasspecifically built to make it easy to create child themes.
  4. It is frequently update, which is an absolute requirement for a parent theme

So, there are many reasons to (learn to) understand the ins and outs of the Underscores theme

************************************************************************

What you need to know before statring with this tutorial

  1. Basis knowledge of Wordpress and Wordpress themes.
  2. Basic knowledge of working with Sass, NodeJS, Npm, Gulp and the terminal in OSX or command prompt in Windows.
  3. NodeJS, Npm, Gulp and Sass must be installed on your computer.

==================================================================

On this page:

  1. Install Wordpress. Do we really need to? Yes we do!
  2. Download, install and activate the underscores (_s) starters theme.
  3. Not necessary but recommended: make a screenshot.png and a README.txt.
  4. Install and explore wordpress theme unit test data
  5. Install developer plugins

==================================================================

1. Install Wordpress.

Do we really need to? Yes we do!

==================================================================

 

==================================================================

2. Download, install and activate the underscores starters theme.

Github repo branch: part1_2

Underscores is a starters theme built specifically to be used as the starting point for new custom themes. Go to underscores.me and fill in the advanced options form. I'am going to use:

  • Theme name: Pre Underscores.
  • Theme Slug: pre_underscores
  • Author: Maarten von Krejfelt
  • Author URI: www.preludio.nl/themes
  • Description: building my fabulous own Wordpress theme with Underscores

Check the 'Sassisfy' checkbox (we are going to use it) and click the 'Generate' button.

After you downloaded the underscores them, install it and activate it.

==================================================================

 

==================================================================

3. Not necessary but recommended: make a screenshot.png and a README.txt

  • Make a screenshot.png and place it into your theme folder. The screenshot.png image is the image that shows up if you go to Appearance => Themes in the menu of the Wordpress administration
  • Create a README.txt file. You can use the Twenty Seventeen README.txt as an example for your own README.txt file in your own themes.

==================================================================

4. Install and explore wordpress theme unit test data

  • Go to https://codex.wordpress.org/Theme_Unit_Test and downloas the test data
  • Go to: Tools -> Import -> Wordpress -> Install now (this installs the Wordpress Importer Plugin)
  • Then click 'Run Importer' and browse to the downloaded test data file (.xml)
  • Then click 'Upload file and import.
  • Don't forget to check "Download and import file attachments"
=====================================================================

5. Install the following developer plugins:

  • Developer from Automattic
  • In Developer choose:
  • Debug bar
  • Monster Widget
  • Regenerate thumbnails
  • Theme check

==================================================================

Leave a comment