WSUWP Spine Child Theme Skeleton

A framework for building a WordPress child theme for the WSUWP Spine Parent Theme at WSU.

Initial setup

Setup the theme repository

1. Create a new repository under the Washington State University organization. This should have a name like "website.wsu.edu" that matches the address of the site where the theme will be used. If this is a more general theme, feel free to use something like "WSUWP Descriptive Theme".
2. Clone this WSUWP Spine Child Theme Skeleton repository to a directory on your computer named for the new theme.
3. Change into that new directory.
4. Remove the .git directory that provides the history for the WSUWP Spine Child Theme Skeleton project.
5. Initialize a new git repository in the directory.
6. Add the new repository you created in step 1 as the origin remote.

In terminal

git clone https://github.com/washingtonstateuniversity/WSUWP-Spine-Child-Theme-Skeleton.git website-theme-dev
cd website-theme-dev
rm -fr .git
git init
git remote add origin https://github.com/washingtonstateuniversity/website.wsu.edu.git
git status

Alter the theme to be its own project

There are several places throughout the WSUWP Child Theme Skeleton code that should be changed to match the new theme.

1. The theme header portion of the stylesheet in css/00-banner.css should be adjusted.
2. Update the project name in composer.json.
3. Update the project name and URL in package.json.
4. Update the ruleset name and description in phpcs.ruleset.xml.
5. Update the name and description of the project in README.md, replacing all of this text.
6. Update the name, copyright, and URL in LICENSE.
7. If desired, replace screenshot.png with a screenshot of the child theme.

Testing the initial theme structure

1. Install the NPM dependencies.
2. Install the Composer dependencies.
3. Ensure code standards are sniffed properly.
4. Ensure CSS files are properly processed into style.css and style.css.map.

In terminal

npm install
composer install
grunt phpcs
grunt

Add the updated theme files to the repository

The theme should now be in its initial state, with all pieces renamed to fit the new project. An initial commit can be added with all of these files.

1. Check git status to be sure only the intended files are being added.
2. Add all files to staging.
3. Add an initial commit.
4. Push the initial commit to the master branch on the origin remote.

In terminal

git status
git add -A
git commit -m "Initial commit"
git push origin master

Maintaining the project structure

The child theme CSS is maintained in the css/ directory. Grunt tasks are responsible for concatenating these files in alphabetical order, running autoprefixer, and then linting the compiled CSS for errors. The final destination for the CSS is style.css. A source map is created in style.css.map.

• CSS should be added and edited in the css/ directory.
• The built style.css is automatically generated and tracked in version control.
• Run grunt to generate style.css before committing changes.
• Use grunt serve to start a local web server and view the style guide.

When JavaScript is added to the theme, similar tasks can be added for linting, concatenating, and minifying the JavaScript as needed.