WSUWP Spine Child Theme Skeleton
Setup the theme repository
- 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".
- Clone this WSUWP Spine Child Theme Skeleton repository to a directory on your computer named for the new theme.
- Change into that new directory.
- Remove the
.gitdirectory that provides the history for the WSUWP Spine Child Theme Skeleton project.
- Initialize a new git repository in the directory.
- Add the new repository you created in step 1 as the
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.
- The theme header portion of the stylesheet in
css/00-banner.cssshould be adjusted.
- Update the project name in
- Update the project name and URL in
- Update the name and description of the project in
README.md, replacing all of this text.
- Update the name, copyright, and URL in
- If desired, replace
screenshot.pngwith a screenshot of the child theme.
Testing the initial theme structure
- Install the NPM dependencies.
- Install the Composer dependencies.
- Ensure code standards are sniffed properly.
- Ensure CSS files are properly processed into
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.
git statusto be sure only the intended files are being added.
- Add all files to staging.
- Add an initial commit.
- Push the initial commit to the master branch on the origin remote.
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
- CSS should be added and edited in the
- The built
style.cssis automatically generated and tracked in version control.
style.cssbefore committing changes.
grunt serveto start a local web server and view the style guide.