WP Manifestindependent plugin directory
manifest / developer / wp-theme-tools

WP Theme Tools

WordPress Theme Tooling plugin

by Daniel Pringle · github.com/danielpringle/wp-theme-tools · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/danielpringle/wp-theme-tools/archive/refs/heads/master.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/danielpringle/wp-theme-tools ↗

Tooling and experiments for working with WordPress theme.json, design tokens, spacing systems, typography scales, and visual debugging workflows.

Focused on treating WordPress as a design-system platform with reusable tooling for block themes and modern frontend development.

Features

  • Visualize and explore theme.json tokens (colors, spacing, typography, shadows, etc.)
  • Copy-to-clipboard UI for CSS variables and preset references
  • Spacing and typography scale visualizers
  • Color palette and gradient previews
  • Editor-only and frontend styles with SASS/SCSS support
  • Modular, reusable JS and PHP components

Installation

  1. Clone or download this repository into your wp-content/plugins directory.
  2. Run npm install to install dependencies.
  3. Run npm run build to compile assets.
  4. Activate the plugin in the WordPress admin.

Usage

  • Add the provided blocks to your block-based theme or posts.
  • Use the visual tools to inspect and copy theme token references.
  • Customize your theme.json and see changes reflected in the tools.

Components

CopyButton (PHP)

Reusable UI component for copy-to-clipboard actions.

Usage:

use DPUK\ThemeTools\Components\CopyButton;

echo CopyButton::render( 'Text to copy' );
// With custom label and type
echo CopyButton::render( 'Another value', 'Copy Value', 'secondary' );

Parameters:

  • $value (string, required): The text to be copied to the clipboard.
  • $label (string, optional): The button label. Default: 'Copy'.
  • $type (string, optional): Modifier for styling (e.g., 'default', 'secondary'). Default: 'default'.

Integration:

  • The button is rendered with the copy-to-clipboard class and a data-copy-value attribute.
  • The JS component (src/js/components/copy-to-clipboard.js) automatically enables clipboard functionality for these buttons.
  • No manual JS initialization is needed if your build includes this script.

Example Output:

<button type="button" class="copy-to-clipboard copy-button copy-button--color" data-copy-value="#123456" aria-label="Copy Copy Color to clipboard" title="#123456">
  <span class="copy-button__label">Copy Color</span>
  <span class="copy-button__icon" aria-hidden="true">...</span>
  <span class="copy-button__copied-message" aria-live="polite">Copied!</span>
</button>

Styling:

  • Use the provided classes (copy-button, copy-button--{type}) to style the button as needed.

Development

  • Source code is organized by block and component.
  • Shared logic is in /src/js/components and /src/sass.
  • Run npm run dev for development mode.
  • Run composer check-cs to check PHP coding standards.

Contributing

Pull requests and issues are welcome! Please follow WordPress and project coding standards.

License

GPL-2.0+