Description
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
Color palette management with live contrast previews. 
Spacing scale with drag-to-reorder functionality. 
Typography scale with fluid clamp() support. 
Border radius presets with live corner previews. 
Shadow presets with live box-shadow previews. 
Installation
- Upload the
theme-json-design-managerfolder to/wp-content/plugins/. - Activate the plugin through the Plugins screen in WordPress.
- Go to Appearance Design Manager to start managing your design tokens.
FAQ
-
Does this plugin require a specific theme?
-
No. It works with any block theme or classic theme that supports
theme.json. WordPress 6.1 or later is required. -
Will my tokens override the theme’s existing colors/spacing?
-
Yes, tokens with matching slugs replace the theme’s values. New slugs are appended alongside existing ones. This is WordPress’s native slug-based merge behavior.
-
What happens when I deactivate the plugin?
-
All plugin-managed tokens are removed from the Global Styles pipeline and your theme’s original
theme.jsonvalues are restored. Your token data is preserved in the database so nothing is lost. When you delete (uninstall) the plugin, the data is removed for a clean uninstall. -
Can I use fluid typography?
-
Yes. On the Typography tab, check the “Fluid” toggle and enter min/max values. WordPress will generate a responsive
clamp()function automatically. -
How do I reference these tokens in CSS?
-
Each token generates a CSS custom property. For example, a color with slug “primary” becomes
var(--wp--preset--color--primary). The CSS variable name is displayed next to each token row in the admin.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Theme.json Design Manager” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Theme.json Design Manager” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.0.0
- Initial release.
- Color palette, spacing scale, typography scale, border radius, and shadow preset management.
- Live previews for colors, radius, and shadows.
- Fluid typography with clamp() support.
- Drag-to-reorder for spacing tokens.
- Settings tab with toggles to hide default presets from the editor.
- Reserved slug protection — auto-renames color slugs that collide with WordPress core marker classes.
- Diagnostics tab — runtime view of stored tokens, merged palette, CSS variables, and preset classes.
- Base color fallback — ensures
--wp--preset--color--basestays defined when replacing the theme palette. - Full theme.json integration via
wp_theme_json_data_themefilter. - Extensibility hooks for developers.