Generate responsive WordPress themes from static HTML templates with ACF integration, automated testing, and GCP deployment. Complete Docker-based development environment with WP-CLI automation.
This skill helps you work with an automated HTML-to-WordPress generator project. Transform static HTML/CSS templates into responsive WordPress themes with Advanced Custom Fields (ACF), Brevo email integration, automated tests, and Google Cloud Platform deployment.
This skill guides you through developing and maintaining a WordPress theme generator that:
1. **Initialize the environment**
- Run `make init` to copy `.env.example` to `.env`
- Configure `.env` with appropriate values:
- Database credentials (DB_NAME, DB_USER, DB_PASSWORD)
- WordPress admin user credentials
- Site URL (defaults to http://localhost:8000)
- Brevo API key for email integration
- Optional theme slug (WP_THEME_SLUG)
2. **Start development environment**
- Run `make up` to build and start Docker containers
- Nginx will be available at http://localhost:8000
- Services: Nginx (web server), PHP-FPM 8.3, MariaDB 10.11, optional Mailpit
3. **Install WordPress**
- Run `make install-wp` to execute WP-CLI automation
- This installs WordPress core, plugins (ACF, Brevo), and configures settings
- WordPress admin will be accessible with credentials from `.env`
1. **Prepare HTML template**
- Place static HTML template as `input/template.zip`
- Template should contain HTML, CSS, images, and other assets
2. **Generate WordPress theme**
- Run `make apply-theme` to start the conversion process
- The script (`scripts/02_map_acf_from_template.js`) will:
- Parse HTML using Cheerio
- Detect repeating patterns (team members, features, etc.)
- Generate ACF Repeater fields automatically
- Map images to ACF Image fields
- Map text content to ACF Text fields
- Create ACF JSON schema in `wp-content/themes/auto-theme/acf-json/`
- Generate WordPress homepage with pre-filled ACF fields
3. **Verify results**
- Visit http://localhost:8000 to view the generated theme
- Check that responsive breakpoints work (576px, 768px, 992px, 1200px)
- Review ACF field mappings in WordPress admin
4. **Manual adjustments (if needed)**
- Theme files located in `wp-content/themes/auto-theme/`
- ACF field definitions stored as JSON in `acf-json/` directory
- Use `get_field()` and `the_field()` for dynamic content in theme templates
1. **Run complete test suite**
- Execute `make test` to run linters and Playwright E2E tests
- Tests run across mobile, tablet, and desktop viewports
- Validates responsive layouts and functionality
2. **Debug individual tests**
- Install Node dependencies: `make node-ci`
- Run specific test: `npx playwright test --headed --project=Desktop`
- View browser interactions in headed mode
3. **Health check**
- Verify `/healthz` endpoint returns HTTP 200
- Endpoint provides DB status and WordPress version
- Use for monitoring in production deployments
4. **Code quality checks**
- PHPCS validation for PHP code
- ESLint validation for JavaScript
- Stylelint validation for CSS
1. **Deploy to GCP development environment**
- Configure GCP credentials in `deploy/dev.sh`
- Set up GitHub Secrets for service account (if using CI/CD)
- Run `make deploy-dev` to deploy to Google Cloud VM
2. **CI/CD pipeline**
- GitHub Actions workflow in `.github/workflows/ci.yml`
- Automated linting, testing, and deployment on main branch
- Requires GCP service account configuration
1. **Reset environment**
- Run `make reset` for complete environment reset
- Stops containers and removes database volume
- Use when encountering persistent issues
2. **Container management**
- Stop containers: `make down`
- View logs: `docker-compose logs php` or `docker-compose logs nginx`
- Access WP-CLI: `docker-compose exec php wp --info --allow-root`
3. **Common issues**
- **DB connection errors**: Run `make down && make up`
- **Port conflicts**: Modify port mapping in `docker-compose.yml`
- **Missing template**: Ensure `input/template.zip` exists
- **File permissions**: Use `sudo chown -R $USER:$USER wp-content` if needed
4. **ACF field sync**
- Field definitions stored in `acf-json/` for version control
- Use WP Admin → ACF → Sync to reload JSON definitions
- Template parsing can be re-run safely (idempotent)
Before deploying or marking work complete:
**Setting up a new project:**
```bash
make init
make up
make install-wp
```
**Converting an HTML template:**
```bash
make apply-theme
make test
```
**Deploying to production:**
```bash
make deploy-dev
curl https://your-domain.com/healthz
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/wordpress-auto-generator/raw