Skip to content
A child theme for Human Resources Services
CSS PHP JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Add Github issue and pull request templates May 1, 2019
articles Filter post date display using a custom template tag Jun 10, 2019
assets 📦 Update compiled files Sep 20, 2019
includes ⚠️ Fix lint issues with "phpcs:ignore" syntax and a misused WP global Sep 20, 2019
parts Use new menu location and adjust depth Apr 15, 2019
src 🔖 v1.7.2 Sep 20, 2019
.editorconfig Add development files Feb 9, 2018
.eslintrc.json 🔧 Update config and add dependencies for WP blocks Mar 20, 2019
.gitattributes Add Github issue and pull request templates May 1, 2019
.gitignore Clean up gitignore file Dec 11, 2018
.stylelintrc.yml Allow `@extend` and no-space at rules in blocks Apr 3, 2018
.svgo.yml 🔧 Fix #72 no self-closing SVG elements Nov 14, 2018
.travis.yml 💚 Get Travis CI running Dec 10, 2018
CHANGELOG.md 🔖 v1.7.2 Sep 20, 2019
LICENSE Add development files Feb 9, 2018
README.md 🔖 v1.7.2 Sep 20, 2019
archive.php Removed unneeded page query var Aug 2, 2018
attachment.php Redirect attachment page requests to parent or file URL Apr 17, 2019
composer.json ⬆️ wp-coding-standards/wpcs 1.2.1 -> 2.1.1 Sep 20, 2019
composer.lock ⬆️ wp-coding-standards/wpcs 1.2.1 -> 2.1.1 Sep 20, 2019
functions.php Move block registration to setup class Apr 1, 2019
home.php ⚠️ Fix php lint warnings Jun 20, 2019
package-lock.json ⬆️ various npm dev dependencies Sep 20, 2019
package.json ⬆️ various npm dev dependencies Sep 20, 2019
page.php Adjust flow and add if posts check Aug 7, 2018
phpcs.ruleset.xml Add development files Feb 9, 2018
screenshot.png Update theme screenshot Nov 8, 2018
search.php ⚠️ Fix php lint warnings Jun 20, 2019
single.php Fix spacing and package info Jun 12, 2018
style.css 📦 Update compiled files Sep 20, 2019
taxonomy-hrs_unit.php ⚠️ Fix php lint warnings Jun 20, 2019
webpack.config.js Specify core-js version for useBuiltIns May 16, 2019

README.md

WSU Human Resource Services Theme

Build Status

Contributors: WSU University Communications, Adam Turner
Requires at least: WordPress 5.0
Tested up to: WordPress 5.2.2
Requires PHP: 5.6
Version: 1.7.2
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Description

A child theme of the Washington State University (WSU) Human Resource Services (HRS) website.

Installation & Dependencies

The WSU Human Resource Services Theme is not intended for general use and is not available from the WordPress Themes repository. It must be manually installed in the themes directory.

Installation

  1. Navigate to the theme GitHub repository and select "Download ZIP" from the "Clone or download" button menu.
  2. Extract the downloaded ZIP file into the WordPress themes directory on your server and rename the downloaded directory to hrs.wsu.edu.
  3. In your admin panel, go to Appearance -> Themes and locate the newly installed WSU Human Resources Services theme.
  4. Select the "Activate" button to use the theme.

Dependencies

The WSU Human Resource Services Theme is a child of the WSU Spine parent theme. Follow the instructions under installation and make sure to rename the Spine theme directory to wsuspine.

The WSU Spine parent theme also provides the spine and skeleton framework for the WSU Web in WordPress, which the WSU HRS Theme depends on for its global navigation menu.

For developers

The WSU HRS Theme development environment relies primarily on the NPM and Composer package managers. The package.json and composer.json configuration files will install the necessary dependencies for testing and building the production version of the theme. The NPM scripts in package.json do most of the heavy lifting.

Initial setup

  1. Clone the WSU Human Resource Services Theme to a directory on your computer.
  2. Change into that directory.
  3. Install the Composer dependencies.
  4. Install the NPM dependencies.
  5. Ensure PHP, CSS, and JS linting coding standards checks are working -- this should exit with zero (0) errors.
  6. If you plan to contribute changes to the WSU HRS Theme you're encouraged to follow the Git feature branch workflow. The production branch is master and the primary development branch is 1.x, such that the general development flow will be new-feature --> 1.x --> master.

In a terminal:

git clone https://github.com/washingtonstateuniversity/hrs.wsu.edu.git
cd hrs.wsu.edu
composer install
npm install
npm test
git checkout -b new-feature

Project structure

The WSU HRS Theme CSS, JavaScript, and images are maintained in scss/, js/, and images/ directories in the src/ directory. Stylesheets are written in Sass and JavaScript in ES6+. NPM scripts are responsible for processing these files into production format, polyfilling where necessary, and producing source maps. The build process includes the following steps:

  1. Prepare the build environment by removing the contents of the assets/ directory. (Note: Do not manually create anything here; it will be deleted on build.)
  2. Run linting and code standards checks on PHP (phpcs), SCSS (stylelint), and JS (eslint) files.
  3. Build CSS: Compile the main Sass entry point (/src/scss/style.scss), run autoprefixer, save a human readable version of the stylesheet to style.css for WordPress to parse, then save minified production version(s) of the stylesheet(s) to assets/css/.
  4. Build JS: Compile the main JS entry point (/src/js/main.js) using Webpack. Our configuration produces minified JS for two build targets -- one for modern browsers (assets/js/main.js) and one for legacy browsers (assets/js/main.es5.js) -- using Babel to transpile and add polyfills only as needed. (For more on this method review the webpack.config.js file and see Philip Walton, "Deploying ES2015+ Code in Production Today"; Addy Osmani and Mathias Bynens, "Using JavaScript modules on the web"; and Shubham Kanodia, "Smart Bundling: How To Serve Legacy Code Only To Legacy Browsers" Smashing Magazine.)
  5. Build images: Optimize SVG images and copy all images to the assets/images/ directory.

To maintain this structure:

  • Styles should be added and edited in the src/scss/ directory.
    • All .css files (including style.css) are automatically generated by the NPM build scripts and tracked in version control. Run npm run build:style -s to build only the CSS.
  • JavaScript should be added and edited in the src/js/ directory.
    • All production JS files are automatically generated by NPM and Webpack and trackd in version control. Run npm run build:script -s to build only the JS.
  • Theme images should be added and edited in the src/images/ directory (and SVG files in the src/images/svg/ directory).
    • All production image files are automatically moved into place by the NPM build scripts and tracked in version control. Run npm run build:image -s to build only the images.
  • Run npm run build -s to test and update all compiled files before committing changes.

Browser Support

The WSU Human Resource Services child theme uses Browserlist to help monitor feature support. It aims provide a reasonably fast and fully usable experience on older browsers while to progressively enhancing the user experience on more modern browsers.

Specifically, the HRS theme aims to support all browsers with greater than 1% global usage (based on data from Can I Use), as well as IE 11 and the Firefox Extended Support Release (ESR). The Browserlist configuration, defined in package.json is:

"browserslist": [
  "> 1%",
  "ie 11",
  "Firefox ESR"
],

Review the current list of mobile and desktop browsers this resolves to using the Browserlist online demo (search for > 1%,ie 11,Firefox ESR).

You can’t perform that action at this time.