# Theme template

Build assets and watch for changes:

```
npm run start
```

Start local server:

```
npx wp-env start
```

For more detailed instructions, keep reading.

## Local server

The `@wordpress/env` package is used to setup a local development server. See `@wordpress/env` [documentation](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/) for available commands.

## Remote server

You can setup synchronization with a remote server using `wpdev.config.js`. You need to have an SSH key pair set up on your local machine and installed on the remote server, then fill in `ssh` settings in `wpdev.config.js`.

`npm run sync` is the default command you can use for synchronizing after everything is configured properly. See `npx wp-dev sync --help` for all available synchronization options.

## Writing PHP

If you don't like the PHP files that are generated by default, you are free to delete them and use your own. In that case, you can ignore this section.

The theme is setup to use PSR-4 autoloading, so that you don't have to worry about `require`-ing files manually. If you're not familiar with PSR-4, it's quite simple, you can read about it [here](https://riptutorial.com/php/example/32582/psr-4--autoloader).

Theme initialization code should go into `./src/Main.php`, keeping `functions.php` as clean as possible.

It is recommended that you use the `init` method within every class to do "things with side effects", such as adding WordPress hooks (e.g. `add_action`), instead of doing it in the `__construct`. This way, if you add unit tests, you will be able to construct the classes that you want to test without polluting things.

## Writing JavaScript

You can add new JavaScript entry points by modifying `webpack.config.js`. Commands like `npm run start` will build javascript and output it into the `./build` directory.

You can install new modules with `npm` and use them in your JS files.

All entry points are automatically registered as `<prefix>-<name>` where `prefix` is the name of your directory in kebab case (e.g. `my-wp-app`), and `name` is the webpack entry point name. You can see how exactly this is done in `./src/Assets.php`.

## Commands

JavaScript / Styles commands

- `npm run start` => Build styles and JS and watch for changes.
- `npm run build` => Build styles and JS for production.

Formatting commands

- `npm run format` => Format PHP, JS and SCSS.

Remote server commands

- `npm run sync` => Sync remote server files and database with local server.

Other commands

- `npm run zip` => Generate ZIP. The files that are included are defined by "files" entry in package.json.