Quick offers a smooth start for crafting custom WordPress themes. Backed by TypeScript, AlpineJS, and TailwindCSS support, it transforms theme development into a fluid journey.
- Clone the repository into your wp-content/themes directory.
- Install dependencies by running
pnpm install
andcomposer install
. - Generate the autoload file with
composer dump-autoload
. - Activate the theme from the WP admin panel.
- Optionally, personalize settings in the quick.config.ts file.
The development process revolves around three core files:
- main.ts: The main TypeScript file.
- main.css: The primary CSS file.
- editor.css: Styles specifically for the editor (Note: This file does not support the reload feature).
To initiate the development server, run pnpm dev
. By default, the theme loads files from the dist folder. However, in development mode, it additionally loads an extra dev-setup.php file. This file dequeues main.ts and main.css, instead loading them from the development server.
Run pnpm build
to generate the following:
dist
folder with compiled styles, fonts, and JS files,.quick
folder containing all necessary files ready for export
Use of Alpine is optional. By default, focus plugin is included. See header.php and src/ts/alpine.
If you encounter any issues, have suggestions, or would like to contribute to this project, please open an issue or submit a pull request. Contributions are welcome and greatly appreciated!