wordpress

What this skill does

# WordPress Development Workflow Bundle

## Overview

Comprehensive WordPress development workflow covering theme development, plugin creation, WooCommerce integration, performance optimization, and security. This bundle orchestrates skills for building production-ready WordPress sites and applications.

## WordPress 7.0 Features (Backward Compatible)

WordPress 7.0 (April 9, 2026) introduces significant features while maintaining backward compatibility:

### Real-Time Collaboration (RTC)
- Multiple users can edit simultaneously using Yjs CRDT
- HTTP polling provider (configurable via `WP_COLLABORATION_MAX_USERS`)
- Custom transport via `sync.providers` filter
- **Backward Compatibility**: Falls back to post locking when legacy meta boxes detected

### AI Connectors API
- Provider-agnostic AI interface in core (`wp_ai_client_prompt()`)
- Settings > Connectors for centralized API credential management
- Official providers: OpenAI, Anthropic Claude, Google Gemini
- **Backward Compatibility**: Works with WordPress 6.9+ via plugin

### Abilities API (Stable in 7.0)
- Standardized capability declaration system
- REST API endpoints: `/wp-json/abilities/v1/manifest`
- MCP adapter for AI agent integration
- **Backward Compatibility**: Can be used as Composer package in 6.x

### DataViews & DataForm
- Replaces WP_List_Table on Posts, Pages, Media screens
- New layouts: table, grid, list, activity
- Client-side validation (pattern, minLength, maxLength, min, max)
- **Backward Compatibility**: Plugins using old hooks still work

### PHP-Only Block Registration
- Register blocks entirely via PHP without JavaScript
- Auto-generated Inspector controls
- **Backward Compatibility**: Existing JS blocks continue to work

### Interactivity API Updates
- `watch()` replaces `effect` from @preact/signals
- State navigation changes
- **Backward Compatibility**: Old syntax deprecated but functional

### Admin Refresh
- New default color scheme
- View transitions between admin screens
- **Backward Compatibility**: CSS-level changes, no breaking changes

### Pattern Editing
- ContentOnly mode defaults for unsynced patterns
- `disableContentOnlyForUnsyncedPatterns` setting
- **Backward Compatibility**: Existing patterns work

## When to Use This Workflow

Use this workflow when:
- Building new WordPress websites
- Creating custom themes
- Developing WordPress plugins
- Setting up WooCommerce stores
- Optimizing WordPress performance
- Hardening WordPress security
- Implementing WordPress 7.0 features (RTC, AI, DataViews)

## Workflow Phases

### Phase 1: WordPress Setup

#### Skills to Invoke
- `app-builder` - Project scaffolding
- `environment-setup-guide` - Development environment

#### Actions
1. Set up local development environment (LocalWP, Docker, or Valet)
2. Install WordPress (recommend 7.0+ for new projects)
3. Configure development database
4. Set up version control
5. Configure wp-config.php for development

#### WordPress 7.0 Configuration
```php
// wp-config.php - Collaboration settings
define('WP_COLLABORATION_MAX_USERS', 5);

// AI Connector is enabled by installing a provider plugin
// (e.g., OpenAI, Anthropic Claude, or Google Gemini connector)
// No constant needed - configure via Settings > Connectors in admin
```

#### Copy-Paste Prompts
```
Use @app-builder to scaffold a new WordPress project with modern tooling
```

### Phase 2: Theme Development

#### Skills to Invoke
- `frontend-developer` - Component development
- `frontend-design` - UI implementation
- `tailwind-patterns` - Styling
- `web-performance-optimization` - Performance

#### Actions
1. Design theme architecture
2. Create theme files (style.css, functions.php, index.php)
3. Implement template hierarchy
4. Create custom page templates
5. Add custom post types and taxonomies
6. Implement theme customization options
7. Add responsive design
8. Test with WordPress 7.0 admin refresh

#### WordPress 7.0 Theme Considerations
- Block API v3 now reference model
- Pseudo-element support in theme.json
- Global Styles custom CSS honors block-defined selectors
- View transitions for admin navigation

#### Theme Structure
```
theme-name/
├── style.css
├── functions.php
├── index.php
├── header.php
├── footer.php
├── sidebar.php
├── single.php
├── page.php
├── archive.php
├── search.php
├── 404.php
├── template-parts/
├── inc/
├── assets/
│   ├── css/
│   ├── js/
│   └── images/
└── languages/
```

#### Copy-Paste Prompts
```
Use @frontend-developer to create a custom WordPress theme with React components
```

```
Use @tailwind-patterns to style WordPress theme with modern CSS
```

### Phase 3: Plugin Development

#### Skills to Invoke
- `backend-dev-guidelines` - Backend standards
- `api-design-principles` - API design
- `auth-implementation-patterns` - Authentication

#### Actions
1. Design plugin architecture
2. Create plugin boilerplate
3. Implement hooks (actions and filters)
4. Create admin interfaces
5. Add custom database tables
6. Implement REST API endpoints
7. Add settings and options pages

#### WordPress 7.0 Plugin Considerations
- **RTC Compatibility**: Register post meta with `show_in_rest => true`
- **AI Integration**: Use `wp_ai_client_prompt()` for AI features
- **DataViews**: Consider new admin UI patterns
- **Meta Boxes**: Migrate to block-based UIs for collaboration support

#### RTC-Compatible Post Meta Registration
```php
register_post_meta('post', 'custom_field', [
    'type' => 'string',
    'single' => true,
    'show_in_rest' => true,  // Required for RTC
    'sanitize_callback' => 'sanitize_text_field',
]);
```

#### AI Connector Example
```php
// Using WordPress 7.0 AI Connector
// Note: Requires an AI provider plugin (OpenAI, Claude, or Gemini) to be installed and configured

// Basic text generation
$response = wp_ai_client_prompt('Summarize this content.')
    ->generate_text();

// With temperature for deterministic output
$response = wp_ai_client_prompt('Summarize this content.')
    ->using_temperature(0.2)
    ->generate_text();

// With model preference (tries first available in list)
$response = wp_ai_client_prompt('Summarize this content.')
    ->using_model_preference('gpt-4', 'claude-3-opus', 'gemini-2-pro')
    ->generate_text();

// For JSON structured output
$schema = [
    'type' => 'object',
    'properties' => [
        'summary' => ['type' => 'string'],
        'keywords' => ['type' => 'array', 'items' => ['type' => 'string']]
    ],
    'required' => ['summary']
];
$response = wp_ai_client_prompt('Analyze this content and return JSON.')
    ->using_system_instruction('You are a content analyzer.')
    ->as_json_response($schema)
    ->generate_text();
```

#### Plugin Structure
```
plugin-name/
├── plugin-name.php
├── includes/
│   ├── class-plugin-activator.php
│   ├── class-plugin-deactivator.php
│   ├── class-plugin-loader.php
│   └── class-plugin.php
├── admin/
│   ├── class-plugin-admin.php
│   ├── css/
│   └── js/
├── public/
│   ├── class-plugin-public.php
│   ├── css/
│   └── js/
└── languages/
```

#### Copy-Paste Prompts
```
Use @backend-dev-guidelines to create a WordPress plugin with proper architecture
```

### Phase 4: WooCommerce Integration

#### Skills to Invoke
- `payment-integration` - Payment processing
- `stripe-integration` - Stripe payments
- `billing-automation` - Billing workflows

#### Actions
1. Install and configure WooCommerce
2. Create custom product types
3. Customize checkout flow
4. Integrate payment gateways
5. Set up shipping methods
6. Create custom order statuses
7. Implement subscription products
8. Add custom email templates

#### WordPress 7.0 + WooCommerce Considerations
- Test checkout with new admin interfaces
- AI connectors for product descriptions
- DataViews for order management screens
- RTC for collaborative order editing

#### Copy-Paste Prompts
```
Use @payment-integration to set up WooCommerce with Stripe
```

```
Use @billing-automation to create subscription products in WooCommerce
```

### Phase 5: Perf