howarddc.com | 2.25.2021
The first step is to confirm that your machine is ready for development using Node, NPM, and Gulp.
- NVM: Node Version Manager can be confirmed by running
command -v nvm. - Gulp CLI should be installed globally via
npm install --global gulp-cli. You can confirm it by runninggulp --version.
Once your computer is set, it's time to begin setting up this project.
You'll want to get a local site up and running for the quickest and safest development.
- Pulling a site with Local by WP Engine (You can use any other local dev tool.)
- Installing the Understrap Parent Theme from the WordPress Theme Directory
- Installing a fresh child theme that you can use to start your custom theme.
- Renaming the directory and setting up your theme's style.css to reflect the name of the client.
- Initializing a git repo for your child theme on Bitbucket
- Running
npm installto install all dependencies and launch your new dev environment .
Once you've successfully made it through npm install (and sometimes it ends with an error on the gulp copy-assets command, but that's ok), you can start developing your new theme.
Whenever you're actively developing the theme, let gulp watch handle things like generating and autoprefixing CSS and minifying Javascript.
- Running
gulp watchwhile developing to have CSS and JS processed for you. - Setting up Bootstrap variables in
/sass/theme/_child_theme_variables.scssto pull in the correct fonts, sizes, brand colors, and settings for other potential UI elements you plan to use from Bootstrap. - Adding custom CSS/SASS files in
/sass/theme - Adding custom JS in
/src/js/custom-javascript.js
- Incrementing your theme's version number to trigger cache clearing.
- How to commit/deploy changes back to WPEngine and/or Bitbucket