hoi

Setup Script

Run npm run setup to personalize this starter theme. The interactive script will:

1

Collect your theme info — name, description, author, and author URL. A text domain and slug are derived automatically from the name in kebab-case.

2

Apply replacements across the codebase — updates style.css header, package.json name, README.md title, welcome page heading, and asset handle prefixes in inc/assets.php.

3

Swap the default font — optionally replaces Roboto with any fontsource font. Uninstalls the old package, installs the new one, and updates the import and font-family rule in fonts.css.

4

Remove the welcome page — optionally deletes this demo page and resets the index template to a blank starting point.

5

Clean up after itself — optionally deletes setup.js and removes the setup script from package.json.

Vite Integration

Lightning-fast HMR and optimized production builds with automatic dev/prod switching.

Tailwind CSS v4

Latest Tailwind with native CSS layer support and utility-first workflow.

Modular Architecture

Clean file structure with separation of concerns for easy maintenance.

Adding Fonts

Install a fontsource package:

npm install --save @fontsource/inter

Import in resources/styles/fonts.css:

@import '@fontsource/inter';

Adding Images

Reference images in CSS with relative paths:

.hero {
  background-image: url('../images/hero.webp');
}

Vite will automatically process and optimize them during build.

Important Note

Vite does not parse PHP files for assets. All images, fonts, and other assets must be imported through CSS or JavaScript entry points to be included in the bundle. For PHP-only assets, create a separate directory outside the Vite build process.

Built with passion for comfortable WordPress development