Skip to content

Using with Local by Flywheel or other 3rd party development environment

Roni Laukkarinen edited this page Feb 3, 2023 · 9 revisions

Using Air-light with your own WordPress instance development environment like Docker, Local by Flywheel or MAMP

Please note: If you use Air-light without our dudestack (Documentation: Using with dudestack and LEMP) we recommend you use this theme either by

  1. Installing it from WordPress Theme Directory and copy over post-type.php and taxonomy.php (right click here and select Save Link As...) and phpcs.xml (they are not allowed in WordPress Theme Directory because they are "plugin content" thus not included in the cleaned up version of the theme)

  2. OR (not recommended, but possible) git clone https://github.com/digitoimistodude/air-light.git or download a zip of this repository to and unpack to desired location. This repository contains lots of dotfiles you need to remove so that hey won't interfere with your own (files that start with dot) and some development packages that are only meant for developing Air-light itself, not developing a new theme based on Air-light. The differences between contributing and creating your new next theme are well explained in this issue: Improve the development and workflow on Local by Flywheel and alike with devpackages.

If you want to set up this your own way, it's preferred to install this theme by using the traditional way (option 1) because we don't currently provide a cleanup or _s-like theme generation script for other WP-stacks.

How to use - Recommended steps

  1. Get the cleaned up version of Air-light from WordPress Theme Directory, download zip by clicking the blue Download button
  2. Rename the theme folder from air-light to yourprojectname (your project name here all lowercase without spaces or special characters)
  3. Move theme folder under your WordPress installation
  4. Download Air-light package.json (right click here and select Save Link As...), save it to your theme's folder root
  5. Open Terminal, cd into theme folder and run npm install inside the theme folder
  6. Open project to Visual Studio Code (or to your preferred editor) and run following search & replaces (note: yourprojectname is should always be lowercase without special characters):

Search: air-light
Replace with: yourprojectname

Search: Air-light
Replace with: yourprojectname

Development steps and custom post types (CPTs)

  1. If you use custom post types, you need to copy over post-type.php and taxonomy.php (right click here and select Save Link As...) since they are not allowed in WordPress Theme Directory thus not included in the cleaned up version of the theme.
  2. Install debuggers for gulp and for your editor
  3. Get devpackages and extract files to your project root folder without extra devpackages subfolder. Just copy over every file on your Project directory.
  4. Edit your theme folder name to these files that contain THEMENAME and project folder name to these files that contain PROJECTNAME based on your setup (please note also the content directory, for you it might be wp-content so you need to replace content with wp-content in these files in your project folder accordingly.
  5. Run npm install on your project root folder from Terminal
  6. Activate theme on wp-admin, run gulp and start coding (or alternatively do changes and then run single tasks like gulp styles or gulp js)