Manage theme settings and design tokens for WordPress/Enfold sites.
Manage theme settings and design tokens for WordPress/Enfold sites. Use this to edit colors, fonts, and branding, then deploy changes to your WordPress site.
/plugin marketplace add tuvens/enfold-llm/plugin install tuvens-enfold-llm@tuvens/enfold-llmManage theme settings and design tokens for WordPress/Enfold sites.
/wp-theme <action> [options]
| Action | Description |
|---|---|
show | Display current design tokens |
edit | Modify design tokens |
deploy | Force deploy theme settings |
pull | Pull current settings from WordPress |
reset | Reset tokens to defaults |
This command requires:
theme/design-tokens.json file in reposcripts/generate-theme-settings.py scriptDisplay current design tokens in a readable format:
/wp-theme show
Output:
π¨ Current Design Tokens
========================================
Brand:
Name: Your Site
Tagline: Connecting forrΓ³ communities worldwide
Colors:
Primary: #409265 ββββ (green - links, buttons)
Secondary: #0a364d ββββ (dark blue - headers, footers)
Accent: #179162 ββββ (green - highlights)
Background: #ffffff ββββ (white - main content)
Text: #000000 ββββ (black - body text)
Typography:
Headings: Comfortaa:300,400,700
Body: now-alt-cufonfonts-webfont-custom
Assets:
Logo: /wp-content/uploads/2024/05/logo.png
Favicon: /wp-content/uploads/2024/05/favicon.png
Features:
β
Page preloading
β
Page transitions
β
Lightbox
Implementation:
cat theme/design-tokens.json | jq -r '
"Brand:",
" Name: \(.brand.name)",
" Tagline: \(.brand.tagline)",
"",
"Colors:",
" Primary: \(.colors.primary)",
" Secondary: \(.colors.secondary)",
" Accent: \(.colors.accent)",
" Background: \(.colors.background)",
" Text: \(.colors.text)",
"",
"Typography:",
" Headings: \(.typography.heading_font)",
" Body: \(.typography.body_font)"
'
Interactive editing of design tokens:
/wp-theme edit --color primary
/wp-theme edit --font heading
/wp-theme edit --logo
/wp-theme edit --color primary
Current primary color: #409265
Enter new color (hex format, e.g., #ff6600): #3b82f6
Update using str_replace:
str_replace in theme/design-tokens.json
old_str:
"primary": "#409265",
new_str:
"primary": "#3b82f6",
/wp-theme edit --font heading
Current heading font: Comfortaa:300,400,700
Available Google Fonts (examples):
- Roboto:400,700
- Open Sans:400,600
- Montserrat:400,500,700
- Lato:400,700
- Poppins:400,500,600
For custom uploaded fonts, use: fontname-custom
Enter new font:
/wp-theme edit
What would you like to change?
1. Colors (primary, secondary, accent, etc.)
2. Typography (heading font, body font)
3. Assets (logo, favicon, preloader)
4. Features (preloading, transitions, lightbox)
Choice: 1
Which color? primary
Current: #409265
New value: #3b82f6
Updated theme/design-tokens.json
Commit and push to deploy changes.
Force deploy current design tokens to WordPress:
/wp-theme deploy [--env staging|production]
This is typically automatic when pushing changes, but can be triggered manually:
# Generate settings
python3 scripts/generate-theme-settings.py \
theme/design-tokens.json \
https://staging.example.com \
/tmp/settings.txt
# Deploy via API
curl -X POST "$WP_URL/wp-json/enfold-gitops/v1/settings" \
-u "$WP_USERNAME:$WP_APP_PASSWORD" \
-H "Content-Type: application/json" \
-d "{\"settings\": \"$(cat /tmp/settings.txt)\"}"
Output:
π Deploying theme settings to STAGING
Generating settings from design tokens...
Settings generated (45 properties, 12KB encoded)
Posting to WordPress REST API...
β
Theme settings deployed successfully
CSS regeneration triggered. Changes should be visible after cache clear.
Site: https://staging.example.com
Pull current theme settings from WordPress and update local tokens:
/wp-theme pull [--env staging|production]
β οΈ Warning: This overwrites local design tokens with values from WordPress.
# Fetch current settings
RESPONSE=$(curl -s "$WP_URL/wp-json/enfold-gitops/v1/settings" \
-u "$WP_USERNAME:$WP_APP_PASSWORD")
# Extract relevant values and update design-tokens.json
echo "$RESPONSE" | jq -r '.data' | base64 -d | php -r '
$data = unserialize(file_get_contents("php://stdin"));
$avia = $data["avia"];
$tokens = [
"colors" => [
"primary" => $avia["colorset-main_color-primary"]["std"] ?? "",
"secondary" => $avia["colorset-main_color-secondary"]["std"] ?? "",
// ... etc
]
];
echo json_encode($tokens, JSON_PRETTY_PRINT);
'
Reset design tokens to plugin defaults:
/wp-theme reset [--confirm]
β οΈ Warning: This overwrites your customizations with default values.
/wp-theme reset
This will reset ALL design tokens to defaults:
- Colors: Standard neutral palette
- Typography: System fonts
- Assets: Placeholder paths
- Features: All enabled
Are you sure? (yes/no): yes
Reset complete. Edit theme/design-tokens.json to customize.
When editing colors, understand how they map to Enfold's color sets:
| Token | Used In |
|---|---|
primary | Main content links, buttons, CTAs |
secondary | Headers, footers, headings (dark background) |
accent | Highlights, hover states, menu text |
background | Main content area background |
background_alt | Alternate section backgrounds |
text | Body text color |
text_muted | Meta info, captions, secondary text |
border | Dividers, borders |
Header Color Set:
bg = background (#ffffff)
primary = secondary (#0a364d) - for dark accents
color = accent (#179162) - menu text
Main Color Set:
bg = background (#ffffff)
primary = primary (#409265) - links
color = text (#000000) - body text
heading = secondary (#0a364d)
Alternate Color Set (dark sections):
bg = secondary (#0a364d) - dark background
primary = background (#ffffff) - white links on dark
color = background (#ffffff) - white text
heading = background (#ffffff)
Footer Color Set:
bg = secondary (#0a364d)
color = background (#ffffff)
Changes to theme/design-tokens.json automatically trigger deployment:
/wp-theme edittheme/design-tokens.jsonscripts/generate-theme-settings.py/wp-theme edit --color primary
Current: #409265
New: #3b82f6
git add theme/design-tokens.json
git commit -m "Update primary brand color to blue"
git push origin staging
/wp-theme edit --font heading
Current: Comfortaa:300,400,700
New: Montserrat:400,500,700
# Commit and push...
/wp-theme show --full
# Shows complete Enfold settings that will be generated
| Error | Cause | Solution |
|---|---|---|
| "No design tokens found" | Missing file | Run /wp-setup or create manually |
| "Invalid JSON" | Syntax error | Check JSON formatting |
| "API 404" | Endpoint missing | Update WordPress plugin |
| "API 401" | Auth failed | Check credentials |
| "CSS not updating" | Cache | Clear WordPress/hosting cache |
/wp-setup - Initialize theme settings system/wp-status - Check theme settings status/wp-create-page - Uses design tokens for page styling