Deployment Workflow

Expert guidance for deploying WordPress themes to skyyrose.co (WordPress.com managed hosting) with comprehensive verification and rollback capabilities.

When to Use This Skill

Apply when:

• Deploying theme updates to production
• Verifying deployment success
• Checking Content Security Policy headers
• Monitoring console errors post-deployment
• Performing rollbacks after failed deployments
• Creating deployment packages

SkyyRose Deployment Configuration

{
  "site": {
    "url": "https://skyyrose.co",
    "adminUrl": "https://wordpress.com",
    "theme": "skyyrose-2025",
    "themeDir": "/Users/coreyfoster/DevSkyy/wordpress-theme/skyyrose-2025"
  },
  "verification": {
    "cspRequirements": [
      "'unsafe-inline'",
      "stats.wp.com",
      "widgets.wp.com",
      "cdn.babylonjs.com",
      "cdn.jsdelivr.net",
      "cdn.elementor.com"
    ],
    "consoleErrorThreshold": 10,
    "performanceTargets": {
      "LCP": 2.5,
      "FID": 100,
      "CLS": 0.1
    }
  }
}

Pre-Deployment Checklist

Before deploying, verify:

1. Theme File Integrity

# Check all required files present
required_files=(
  "style.css"
  "functions.php"
  "index.php"
  "header.php"
  "footer.php"
  "inc/security-hardening.php"
)

for file in "${required_files[@]}"; do
  if [ ! -f "$file" ]; then
    echo "ERROR: Missing required file: $file"
    exit 1
  fi
done

2. PHP Syntax Validation

# Validate all PHP files
find . -name "*.php" -exec php -l {} \; | grep -v "No syntax errors"

3. CSP Configuration Check

// Verify inc/security-hardening.php contains:
// - 'unsafe-inline' for scripts and styles
// - Whitelisted WordPress.com domains
// - Whitelisted 3D library CDNs

grep -q "'unsafe-inline'" inc/security-hardening.php || echo "WARNING: Missing 'unsafe-inline'"

4. Asset Verification

# Check CDN URLs are accessible
urls=(
  "https://cdn.babylonjs.com/babylon.js"
  "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"
  "https://fonts.googleapis.com/css2?family=Playfair+Display"
)

for url in "${urls[@]}"; do
  curl -I "$url" 2>&1 | grep "200 OK" || echo "ERROR: $url not accessible"
done

Deployment Process

Step 1: Create Deployment Package

#!/bin/bash
# scripts/create-deployment-package.sh

THEME_DIR="/Users/coreyfoster/DevSkyy/wordpress-theme/skyyrose-2025"
TIMESTAMP=$(date +%Y%m%d-%H%M%S)
PACKAGE_NAME="skyyrose-2025-deploy-${TIMESTAMP}.zip"

cd "$THEME_DIR/.."

# Create ZIP excluding unnecessary files
zip -r "$PACKAGE_NAME" skyyrose-2025 \
  -x "*.DS_Store" \
  -x "*node_modules/*" \
  -x "*.git/*" \
  -x "*.backup" \
  -x "*_bak*" \
  -x "*.log"

echo "Deployment package created: $PACKAGE_NAME"
echo "Size: $(du -h $PACKAGE_NAME | cut -f1)"

Step 2: Upload to WordPress.com

Semi-Automated Process:

1. Open WordPress Admin:

   open "https://wordpress.com/themes/skyyrose.co"
   

2. User Actions:

   • Click "Add New Theme"
   • Click "Upload Theme"
   • Select ZIP file:

     skyyrose-2025-deploy-[timestamp].zip

   • Click "Install Now"
   • CRITICAL: Click "Replace current with uploaded" (not "Activate as new theme")
   • Click "Activate"

3. Clear Caches:

   open "https://wordpress.com/settings/performance/skyyrose.co"
   # User clicks "Clear all caches"
   

Step 3: Post-Deployment Verification

A. CSP Header Verification

# Check CSP headers match requirements
curl -I "https://skyyrose.co/?nocache=1" 2>&1 | grep "content-security-policy"

# Should contain:
# - script-src ... 'unsafe-inline' 'unsafe-eval'
# - style-src ... 'unsafe-inline'
# - Whitelisted domains (stats.wp.com, cdn.babylonjs.com, etc.)

B. Console Error Check

// scripts/check-console-errors.js
const puppeteer = require('puppeteer');

async function checkConsoleErrors() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  const errors = [];
  page.on('console', msg => {
    if (msg.type() === 'error') {
      errors.push(msg.text());
    }
  });

  await page.goto('https://skyyrose.co/?nocache=1', {
    waitUntil: 'networkidle2'
  });

  await page.waitForTimeout(5000);

  console.log(`Total console errors: ${errors.length}`);
  if (errors.length > 10) {
    console.log('WARNING: Excessive console errors detected');
    errors.slice(0, 10).forEach(err => console.log(`  - ${err}`));
  }

  await browser.close();
  return errors.length;
}

checkConsoleErrors();

C. CSS Loading Verification

# Verify style.css loads successfully
curl -I "https://skyyrose.co/wp-content/themes/skyyrose-2025/style.css" 2>&1 | grep "200 OK"

D. Performance Check

# Run Lighthouse audit
npx lighthouse https://skyyrose.co \
  --only-categories=performance \
  --output=json \
  --output-path=./lighthouse-report.json \
  --chrome-flags="--headless"

# Check Core Web Vitals
cat lighthouse-report.json | jq '.audits."largest-contentful-paint".numericValue'
cat lighthouse-report.json | jq '.audits."first-input-delay".numericValue'
cat lighthouse-report.json | jq '.audits."cumulative-layout-shift".numericValue'

Verification Criteria

Success Indicators

• ✅ CSP headers include 'unsafe-inline' and whitelisted domains
• ✅ Console errors < 10 (down from 107+)
• ✅ All CSS/JS assets return 200 OK
• ✅ 3D scenes load without errors
• ✅ Elementor editor functional
• ✅ LCP < 2.5s, FID < 100ms, CLS < 0.1

Failure Indicators

• ❌ Old CSP still present (nonce-based)
• ❌ Console errors > 50
• ❌ 404 errors on CSS/JS
• ❌ 3D scenes fail to render
• ❌ Elementor editor broken

Rollback Procedure

If deployment fails verification:

Option 1: WordPress.com Backup Restore

# Guide user to restore
open "https://wordpress.com/backup/skyyrose.co"

echo "
ROLLBACK STEPS:
1. Find today's backup (before deployment)
2. Click 'Restore'
3. Wait for restoration to complete
4. Verify site is back to previous state
"

Option 2: Re-upload Previous Version

# Find previous deployment package
ls -lt ../skyyrose-2025-deploy-*.zip | head -2

# Upload the second most recent (previous version)
echo "Upload this file to rollback: [previous-version].zip"
open "https://wordpress.com/themes/skyyrose.co"

Troubleshooting

Issue: CSP Headers Not Updated

Symptoms:

• Old nonce-based CSP still present
• Console errors not reduced

Solution:

1. Verify theme file actually uploaded (check file modification date)
2. Deactivate theme, activate Twenty Twenty-Four, then reactivate SkyyRose 2025
3. Clear WordPress.com Batcache (wait 5-10 minutes)
4. Try adding

   ?nocache=1

   to URL

Issue: Console Errors Not Reduced

Symptoms:

• Still seeing 100+ console errors
• CSP violations persist

Solution:

1. Check CSP headers with curl
2. Verify

   inc/security-hardening.php

   contains updated CSP
3. Hard refresh browser (Cmd+Shift+R)
4. Test in incognito window
5. Check browser console for specific blocked resources

Issue: CSS Not Loading

Symptoms:

• Site appears unstyled
• Plain HTML with no formatting

Solution:

1. Check

   style.css

   returns 200 OK
2. Verify CSP allows

   style-src 'self'

3. Clear all caches (WordPress.com + browser)
4. Check for PHP fatal errors in theme files

WordPress.com Specific Considerations

Batcache (Edge Cache)

• WordPress.com uses aggressive edge caching
• Headers may be cached for 5-10 minutes
• Use

  ?nocache=1

  parameter to bypass
• Clear cache via Performance settings

Session Management

• WordPress.com manages sessions at platform level
• Do not implement custom session handling
• Avoid

  session_start()

  in theme code

File Permissions

• No FTP/SSH access
• All changes via WordPress.com admin UI
• Cannot edit files directly on server

CDN Requirements

• External resources must use HTTPS
• CDN URLs must be whitelisted in CSP
• Test CDN availability before deployment

Deployment Frequency

Recommended schedule:

• Major updates: Weekly (Mondays, off-peak hours)
• Bug fixes: As needed (test in staging first)
• Security patches: Immediately
• Performance optimizations: Bi-weekly

Monitoring Post-Deployment

First 24 hours:

• Monitor error logs
• Check Analytics for traffic drops
• Watch user feedback channels
• Verify Core Web Vitals in Search Console

First week:

• Review conversion rates
• Check bounce rates
• Monitor page load times
• Verify Elementor widgets functioning

References

See

references/

directory for:

• wordpress-com-deployment.md

  - WordPress.com specific guidance

• csp-verification.md

  - CSP header validation

• rollback-procedures.md

  - Detailed rollback steps

Examples

See

examples/

directory for:

• deployment-script.sh

  - Complete deployment automation

• verify-deployment.js

  - Post-deployment verification

• rollback.sh

  - Automated rollback procedure

Scripts

See

scripts/

directory for:

• create-deployment-package.sh

  - Build deployment ZIP

• verify-deployment.sh

  - Post-deployment checks

• check-csp-headers.sh

  - CSP validation

• rollback.sh

  - Rollback to previous version