This project consists of a WordPress theme only. If you want to contribute to the creation of this theme you will have to create your own local WordPress development environment and then add the theme.
There are a number of ways to do this. WordPress requires: PHP, MySQL, and a server usually Apache or nginx (PHP’s built-in server also works). Luckily there are tools that have been created to help create a specific development environment for WordPress. Here are a few suggestions on tools that will help you setup a local WordPress environment:
- MAMP - https://www.mamp.info/en/ or WAMP (if on windows) - http://www.wampserver.com/en/
- Docker - https://www.docker.com/ Try the WordPress Docker Development Environment
- VVV (Varying Vagrant Vagrants) - https://github.com/Varying-Vagrant-Vagrants/VVV
- Other tool of your choosing
If you don't know which one to choose, we recommend starting with the first option. This will give you a better idea of how all the various parts are working together. The other two options create virtual workspaces to abstract these pieces and may require additional know-how to work with them.
You need Git to clone the repository. You can get Git from https://git-scm.com/.
We also use a number of node.js tools to initialize the project. You must have node.js and its package manager (npm) installed. You can get them from http://nodejs.org/.
Have a look at the Contribution guide to learn how to best contribute.
Navigate to the wordpress/wp-content/theme
directory and clone the repository.
(The theme also supports using PHP's Composer dependency manager for installing the theme if you use Composer. You'll need to add the project repo URL as a Composer repository.)
Enable debug mode in your wp-config.php
file.
Ensure you have built the project assets (see below) before activating the theme.
Once npm is installed type npm install
from the project directory. After the install is complete it will build the CSS and bundle the JavaScript.
At anytime you can manually build the project assets by typing npm run build
Other helpful npm commands:
npm run build-css
- compiles the sass files to css and outputs them to /dist/main.css
npm run watch-css
- watches the sass files for changes and recompiles the sass files
npm run build-js
- builds the javascript bundle and outputs the results to /dist/main.js
npm run build-prod
- minifies, uglifies project assets for production to /dist/
. Set WP_DEBUG flag to false to use the production assets.
Edit the /.bin/dev-url
file and replace the url in the file with your local WordPress url. (This file is ignored by the repo so don't worry about committing changes.)
Then run npm run dev
which will watch the sass files for changes and build the css and reload the browser. Currently it's setup to use Chrome as your browser of choice but can be configured to use other browsers. See how
This theme uses a custom version of Foundation, the responsive framework. When making changes to the foundation theme do so in the _settings.scss
file located in assets/styles
The settings file is for any specific changes to the framework itself including: variables, media queries, component styles etc. Before adding custom styles see what's possible within the settings file first.
The theme uses a subset of Foundation components. The current included components are found in the assets/styles/foundation.scss
file.
The theme also includes a collection of UW- and theme-specific components, with corresponding Sass files. Any other custom styles that fall outside of the Foundation packaged components and the theme- and UW-specific components, should be added to the assets/styles/custom.scss
file.
To update Foundation in local development (e.g. after a version update), use npm update foundation-sites
See the Contribution Guide to learn how to contribute fixes and features to the project.
Useful notes to read when developing child themes for the UW Theme
See the Accessibility Guide to learn about the theme's Accessibility standards and decision points in the building of this theme.
See the Preparing a new release guide to learn how to prepare the UW Theme for a new version release.
See the CHANGELOG for details about what changes with each release.