WDG AI Dev Environment

Appearance

Theme Commands ​

Streamlined commands for Wikit theme development, build processes, and asset management.

Overview ​

Theme commands simplify working with Wikit-based WordPress themes, providing shortcuts for common development tasks.

Theme Development ​

Start Development Server ​

bash
wdg theme dev [project] [theme-name]

Examples:

bash
# Auto-detect theme in project
wdg theme dev my-site

# Specific theme
wdg theme dev my-site custom-theme

# Current directory (if in theme folder)
wdg theme dev

What it does:

  1. Detects theme directory
  2. Runs npm start or npm run dev
  3. Watches for file changes
  4. Auto-compiles assets
  5. Enables hot module replacement

Build Theme Assets ​

bash
wdg theme build [project] [theme-name] [--prod]

Examples:

bash
# Build for production
wdg theme build my-site

# Development build
wdg theme build my-site --dev

# Specific theme
wdg theme build my-site custom-theme

Watch Mode ​

bash
wdg theme watch [project] [theme-name]

Continuously rebuilds assets on file changes.

Theme Creation ​

Create New Theme ​

bash
wdg theme create <project> <theme-name> [--template=wikit]

Examples:

bash
# Create Wikit-based theme
wdg theme create my-site custom-theme

# Create from template
wdg theme create my-site client-theme --template=wikit-pro

# Create minimal theme
wdg theme create my-site simple-theme --template=minimal

Available Templates:

  • wikit (default) - Full Wikit framework
  • wikit-pro - Wikit with advanced blocks
  • minimal - Bare-bones starter
  • child - Child theme of Wikit

Initialize Theme Repository ​

bash
wdg theme init [project] [theme-name]

Initializes git repository in theme directory:

bash
cd wp-content/themes/custom-theme
git init
git add .
git commit -m "Initial theme setup"

Theme Management ​

List Themes ​

bash
wdg theme list [project]

Output:

Themes for my-site:

custom-theme (active)
  Path: wp-content/themes/custom-theme
  Template: wikit
  Version: 1.0.0
  Status: ✓ All assets compiled
  Indexed: Yes (450 vectors)

wikit-theme
  Path: wp-content/themes/wikit-theme
  Template: parent
  Version: 2.1.0
  Status: ✓ Ready
  Indexed: Yes (3,200 vectors)

Activate Theme ​

bash
wdg theme activate <project> <theme-name>

Example:

bash
wdg theme activate my-site custom-theme

Theme Info ​

bash
wdg theme info <project> <theme-name>

Output:

Theme: custom-theme
Project: my-site
Status: Active
Version: 1.0.0
Author: WDG Development Team
Template: wikit
Description: Custom theme built on Wikit framework

Directory: wp-content/themes/custom-theme
Size: 2.4 MB
Files: 145

Build Configuration:
  ✓ package.json found
  ✓ webpack.config.js configured
  ✓ Source maps: enabled
  ✓ Hot reload: configured

Assets:
  CSS: dist/style.css (45 KB)
  JS: dist/main.js (128 KB)
  Images: 24 files (1.2 MB)

Wikit Blocks Used:
  → wdg/hero
  → wdg/grid
  → wdg/button
  → wdg/testimonials
  (15 total)

Asset Management ​

Compile Assets ​

bash
wdg theme compile <project> <theme-name> [--type=css|js|all]

Examples:

bash
# Compile all assets
wdg theme compile my-site custom-theme

# CSS only
wdg theme compile my-site custom-theme --type=css

# JavaScript only
wdg theme compile my-site custom-theme --type=js

Minify Assets ​

bash
wdg theme minify <project> <theme-name>

Minifies and optimizes all theme assets.

Clean Build Artifacts ​

bash
wdg theme clean <project> <theme-name>

Removes dist/, build/, and node_modules/.

Install Dependencies ​

bash
wdg theme install <project> <theme-name>

Runs npm install in theme directory.

Wikit Integration ​

List Available Blocks ​

bash
wdg theme blocks [--category=<category>]

Output:

Wikit Gutenberg Blocks:

Layout Blocks:
  → wdg/hero - Hero section with background
  → wdg/grid - Responsive grid layout
  → wdg/columns - Multi-column layout
  → wdg/section - Content section wrapper
  → wdg/container - Constrained container

Content Blocks:
  → wdg/button - Call-to-action button
  → wdg/heading - Styled heading
  → wdg/text - Rich text content
  → wdg/image - Responsive image
  → wdg/video - Video embed

...60+ blocks total

Add Wikit Block to Theme ​

bash
wdg theme add-block <project> <theme-name> <block-name>

Example:

bash
wdg theme add-block my-site custom-theme wdg/testimonials

Creates:

  • Block registration in functions.php
  • Custom styles in assets/scss/blocks/_testimonials.scss
  • JavaScript in assets/js/blocks/testimonials.js

Generate Block Template ​

bash
wdg theme generate-block <project> <theme-name> <block-name>

Creates custom Gutenberg block with Wikit patterns:

bash
wdg theme generate-block my-site custom-theme custom/product-card

Theme Configuration ​

Configure Build System ​

bash
wdg theme config <project> <theme-name>

Interactive configuration:

  • Webpack settings
  • Build output paths
  • Source map generation
  • Hot module replacement
  • Asset optimization

Set Theme Options ​

bash
wdg theme set <project> <theme-name> <option> <value>

Examples:

bash
# Enable auto-update
wdg theme set my-site custom-theme auto-update true

# Set primary color
wdg theme set my-site custom-theme primary-color "#0066cc"

# Configure breakpoints
wdg theme set my-site custom-theme mobile-breakpoint 768px

Theme Testing ​

Lint Theme Code ​

bash
wdg theme lint <project> <theme-name> [--fix]

Runs linters:

  • PHP: PHPCS with WordPress Coding Standards
  • JavaScript: ESLint
  • CSS: Stylelint

With auto-fix:

bash
wdg theme lint my-site custom-theme --fix

Run Theme Tests ​

bash
wdg theme test <project> <theme-name>

Runs:

  • PHPUnit tests
  • Jest tests
  • Accessibility tests

Check Theme Requirements ​

bash
wdg theme check <project> <theme-name>

Output:

Theme Requirements Check:

WordPress Compatibility:
  ✓ Minimum version: 6.0
  ✓ PHP version: 8.0+
  ✓ Required functions defined
  ✓ No deprecated functions

Theme Review:
  ✓ style.css header complete
  ✓ screenshot.png present
  ✓ Template files present
  ⚠ Missing readme.txt
  ✓ Proper text domain usage

Performance:
  ✓ No inline CSS
  ✓ Scripts enqueued properly
  ⚠ Consider lazy loading images
  ✓ Minified assets in dist/

Security:
  ✓ Escaping output
  ✓ Sanitizing input
  ✓ Nonces for forms
  ✓ No hardcoded credentials

Theme Deployment ​

Package Theme ​

bash
wdg theme package <project> <theme-name> [--output=<path>]

Creates deployment-ready ZIP file:

bash
wdg theme package my-site custom-theme --output=releases/

Output:

Packaging theme: custom-theme

✓ Building production assets
✓ Removing development files
✓ Cleaning dependencies
✓ Creating archive

Package created: releases/custom-theme-1.0.0.zip (1.8 MB)

Included:
  - Compiled CSS/JS
  - PHP templates
  - Images and fonts
  - style.css and functions.php

Excluded:
  - node_modules/
  - src/ (source files)
  - .git/
  - Development configs

Deploy Theme ​

bash
wdg theme deploy <project> <theme-name> <environment>

Environments:

  • staging - Deploy to staging server
  • production - Deploy to production
  • custom - Custom deployment target

Theme Backup ​

Backup Theme ​

bash
wdg theme backup <project> <theme-name>

Creates timestamped backup including:

  • Theme files
  • Compiled assets
  • Database theme options
  • Customizer settings

Restore Theme ​

bash
wdg theme restore <project> <backup-file>

Theme Analytics ​

Theme Performance ​

bash
wdg theme perf <project> <theme-name>

Output:

Performance Analysis: custom-theme

Asset Sizes:
  CSS: 45 KB (12 KB gzipped)
  JavaScript: 128 KB (38 KB gzipped)
  Images: 1.2 MB (optimized)

Load Time Impact:
  CSS parse time: 25ms
  JS execution time: 180ms
  Total blocking time: 205ms

Optimization Suggestions:
  ✓ CSS minified
  ✓ JS minified
  ⚠ Consider code splitting for JS
  ✓ Images optimized
  → Potential savings: 45 KB

Theme Usage Stats ​

bash
wdg theme stats <project> <theme-name>

Shows:

  • Template usage frequency
  • Block usage statistics
  • Most used components
  • Unused files

Advanced Features ​

Custom Theme Hooks ​

bash
# List available theme hooks
wdg theme hooks list <project> <theme-name>

# Generate hook boilerplate
wdg theme hooks generate <project> <theme-name> <hook-name>

Theme Translations ​

bash
# Generate .pot file
wdg theme translate <project> <theme-name> --generate-pot

# Update translations
wdg theme translate <project> <theme-name> --update

# Check translation coverage
wdg theme translate <project> <theme-name> --check

Theme Screenshots ​

bash
# Generate screenshot.png automatically
wdg theme screenshot <project> <theme-name>

# Custom screenshot
wdg theme screenshot <project> <theme-name> --url=/custom-page --viewport=1200x900

Common Workflows ​

New Theme Development ​

bash
# 1. Create theme
wdg theme create my-site client-theme

# 2. Start development
wdg theme dev my-site client-theme

# 3. Make changes...
# (Auto-rebuilds on save)

# 4. Test and lint
wdg theme lint my-site client-theme --fix
wdg theme check my-site client-theme

# 5. Build for production
wdg theme build my-site client-theme --prod

# 6. Package for deployment
wdg theme package my-site client-theme

Updating Wikit Theme ​

bash
# 1. Pull latest Wikit
wdg repo pull wikit-theme

# 2. Restart project
wdg restart my-site

# 3. Rebuild child theme
wdg theme build my-site custom-theme

# 4. Test
wdg theme check my-site custom-theme

See Also:

Released under the MIT License.

Copyright © 2024 WDG