Theme.json Design Manager

plugin banner

Manage design tokens — colors, spacing, typography, border radius, and shadows — that integrate with WordPress Global Styles via theme.json.

Author:sulaimandauda (profile at wordpress.org)
WordPress version required:6.1
WordPress version tested:6.9.4
Plugin version:1.0.0
Added to WordPress repository:24-03-2026
Last updated:24-03-2026
Rating, %:0
Rated by:0
Plugin URI:
Total downloads:49
plugin download
Click to start download

Theme.json Design Manager provides a user-friendly admin interface for managing design tokens that are automatically merged into your theme’s theme.json Global Styles pipeline. No code editing required.

Features

  • Color Palette — Define semantic color tokens with live contrast previews. Generates --wp--preset--color--{slug} CSS custom properties.
  • Spacing Scale — Create spacing tokens with drag-to-reorder support. Generates --wp--preset--spacing--{slug} CSS custom properties.
  • Typography Scale — Set font size tokens with optional fluid clamp() support. Generates --wp--preset--font-size--{slug} CSS custom properties.
  • Border Radius — Define radius presets. Generates --wp--custom--border-radius--{slug} CSS custom properties.
  • Shadow Presets — Create box-shadow tokens with live previews. Generates --wp--preset--shadow--{slug} CSS custom properties.
  • Hide Defaults — Optionally hide theme/core default presets from the editor for a clean, curated design system. CSS custom properties are preserved.
  • Reserved Slug Protection — Automatically detects and renames color slugs (e.g. “text”, “link”) that conflict with WordPress core CSS marker classes, preventing color override issues in the editor.
  • Diagnostics Tab — View runtime data including stored tokens, merged palette by origin, generated CSS variables, preset classes, and settings at a glance.

How It Works

The plugin stores design tokens in the WordPress database and merges them into the theme’s Global Styles via the wp_theme_json_data_theme filter. Tokens use WordPress’s native slug-based merge system — matching slugs are replaced, new slugs are appended.

All changes are fully reversible. Deactivating the plugin restores original theme styles.

Developer-Friendly

  • Filter hooks for extending tokens before merge (gdtm_tokens_before_merge)
  • Action hooks after save (gdtm_after_save) and for custom tab content (gdtm_after_tab_content)
  • Admin tab filter (gdtm_admin_tabs) for registering additional tabs
Screenshots
FAQ
ChangeLog