Title: Theme.json Design Manager
Author: sulaimandauda
Published: <strong>24. март 2026.</strong>
Last modified: 24. март 2026.

---

Претражи додатке

![](https://ps.w.org/theme-json-design-manager/assets/banner-772x250.png?rev=3490286)

![](https://ps.w.org/theme-json-design-manager/assets/icon-256x256.png?rev=3490305)

# Theme.json Design Manager

 [sulaimandauda](https://profiles.wordpress.org/sulaimandauda/)

[Преузимање](https://downloads.wordpress.org/plugin/theme-json-design-manager.1.0.0.zip)

 * [Детаљи](https://sr.wordpress.org/plugins/theme-json-design-manager/#description)
 * [Прегледи](https://sr.wordpress.org/plugins/theme-json-design-manager/#reviews)
 *  [Постављање](https://sr.wordpress.org/plugins/theme-json-design-manager/#installation)
 * [Изградња](https://sr.wordpress.org/plugins/theme-json-design-manager/#developers)

 [Подршка](https://wordpress.org/support/plugin/theme-json-design-manager/)

## Опис

**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

## Снимци екрана

 * [[
 * 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.
 * [[

## Постављање

 1. Upload the `theme-json-design-manager` folder to `/wp-content/plugins/`.
 2. Activate the plugin through the **Plugins** screen in WordPress.
 3. Go to **Appearance  Design Manager** to start managing your design tokens.

## ЧПП

### 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.json` values 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.

## Прегледи

Нема рецензија за овај додатак.

## Сарадници и градитељи

„Theme.json Design Manager“ је софтвер отвореног кода. Следећи људи су допринели
овом додатку.

Сарадници

 *   [ sulaimandauda ](https://profiles.wordpress.org/sulaimandauda/)

[Преведите „Theme.json Design Manager“ на свој језик.](https://translate.wordpress.org/projects/wp-plugins/theme-json-design-manager)

### Заинтересовани сте за градњу?

[Прегледајте код](https://plugins.trac.wordpress.org/browser/theme-json-design-manager/),
проверите [SVN складиште](https://plugins.svn.wordpress.org/theme-json-design-manager/)
или се пријавите на [белешку градње](https://plugins.trac.wordpress.org/log/theme-json-design-manager/)
преко [RSS-а](https://plugins.trac.wordpress.org/log/theme-json-design-manager/?limit=100&mode=stop_on_copy&format=rss).

## Белешка о изменама

#### 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--base` stays defined when 
   replacing the theme palette.
 * Full theme.json integration via `wp_theme_json_data_theme` filter.
 * Extensibility hooks for developers.

## Мета

 *  Version **1.0.0**
 *  Last updated **2 седмице раније**
 *  Active installations **Мање од 10**
 *  WordPress version ** 6.1 или новије **
 *  Tested up to **6.9.4**
 *  PHP version ** 7.4 или новије **
 *  Language
 * [English (US)](https://wordpress.org/plugins/theme-json-design-manager/)
 * Tags
 * [block-editor](https://sr.wordpress.org/plugins/tags/block-editor/)[css variables](https://sr.wordpress.org/plugins/tags/css-variables/)
   [design tokens](https://sr.wordpress.org/plugins/tags/design-tokens/)[global styles](https://sr.wordpress.org/plugins/tags/global-styles/)
   [theme.json](https://sr.wordpress.org/plugins/tags/theme-json/)
 *  [Напредни преглед](https://sr.wordpress.org/plugins/theme-json-design-manager/advanced/)

## Оцене

No reviews have been submitted yet.

[Додај моју оцену](https://wordpress.org/support/plugin/theme-json-design-manager/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/theme-json-design-manager/reviews/)

## Сарадници

 *   [ sulaimandauda ](https://profiles.wordpress.org/sulaimandauda/)

## Подршка

Имате нешто да кажете? Потребна вам је помоћ?

 [Види форум подршке](https://wordpress.org/support/plugin/theme-json-design-manager/)