Theme.json Design Manager

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