Helmut Wandl

<p><strong>Theme Designer</strong> is a powerful WordPress plugin that allows you to create and manage block themes (FSE themes) without writing a single line of code. It provides an intuitive interface to configure all theme settings that are typically defined in the <code>theme.json</code> file.</p>
<h4>Key Features</h4>
<ul>
<li><strong>Visual Theme Builder</strong>: Create new themes with a simple form interface</li>
<li><strong>Complete Settings Management</strong>: Configure all theme.json settings through an intuitive admin panel</li>
<li><strong>Theme Metadata</strong>: Set theme name, description, author, version, and other metadata</li>
<li><strong>Screenshot Management</strong>: Upload and manage theme screenshots</li>
<li><strong>Color Palettes</strong>: Define custom color palettes and gradients</li>
<li><strong>Typography Settings</strong>: Configure font families, sizes, and fluid typography</li>
<li><strong>Spacing & Layout</strong>: Set up spacing scales, layout sizes, and user controls</li>
<li><strong>Border & Shadow</strong>: Define border styles, radius, and shadow presets</li>
<li><strong>Background Controls</strong>: Configure background image and positioning options</li>
<li><strong>Theme Export</strong>: Download your themes as installable ZIP files</li>
<li><strong>Theme Duplication</strong>: Easily duplicate existing themes as starting points</li>
<li><strong>WordPress Defaults</strong>: Choose to include or exclude WordPress default settings</li>
</ul>
<h4>What Gets Created</h4>
<p>When you create a theme with Theme Designer, it automatically generates:</p>
<ul>
<li><strong>Theme Directory Structure</strong>: Complete theme folder with all necessary files</li>
<li><strong>style.css</strong>: Theme header with all metadata</li>
<li><strong>theme.json</strong>: Complete configuration file with all your settings</li>
<li><strong>Templates</strong>: Basic <code>index.html</code> template for the main content area</li>
<li><strong>Template Parts</strong>: <code>header.html</code> and <code>footer.html</code> parts for site structure</li>
<li><strong>Screenshot</strong>: Theme preview image (if uploaded)</li>
</ul>
<h4>How It Works</h4>
<ol>
<li><strong>Open Theme Designer</strong>: In the admin panel go to “Design” <span aria-hidden="true" class="wp-exclude-emoji">→</span> “Theme Designer”</li>
<li><strong>Create Theme</strong>: Fill out the theme metadata form</li>
<li><strong>Configure Settings</strong>: Use the visual interface to set up colors, typography, spacing, etc.</li>
<li><strong>Preview & Test</strong>: Your theme is immediately available in the WordPress admin</li>
</ol>
<h4>Perfect For</h4>
<ul>
<li><strong>Developers</strong> who want to quickly prototype themes</li>
<li><strong>Designers</strong> who prefer visual tools over code</li>
<li><strong>Agencies</strong> creating custom themes for clients</li>
<li><strong>WordPress users</strong> who want to create their own themes</li>
<li><strong>Theme shops</strong> looking to streamline theme creation</li>
</ul>
<h4>Integration with Site Editor</h4>
<p>Themes created with Theme Designer work seamlessly with the WordPress Site Editor. You can:</p>
<ul>
<li>Customize templates and template parts visually</li>
<li>Add custom styles through the Site Editor interface</li>
<li>Override theme settings on a per-page basis</li>
<li>Create additional templates and parts as needed</li>
</ul>
<p><strong>Note</strong>: Settings defined in the Site Editor take precedence over theme settings, even after saving new values in the theme.</p>
<h4>Requirements</h4>
<ul>
<li>Block theme support enabled</li>
<li>Write permissions for the themes directory</li>
</ul>
<h3>More from the same author</h3>
<p>Take a look at <a href="https://www.wppeak.com/" rel="nofollow ugc">www.wppeak.com</a></p>


Theme Designer

Create and manage block themes with an intuitive interface. No coding required - design your theme's settings through a user-friendly admin panel.

Jim Roberts

<p><strong>Fluid Space Forge</strong> is a professional WordPress plugin that generates responsive spacing systems using modern CSS <code>clamp()</code> functions. Create consistent, scalable margins, padding, and gaps that adapt beautifully from mobile to desktop.</p>
<h4>Why Fluid Space Forge?</h4>
<ul>
<li><strong>Responsive Spacing</strong> – Generate CSS <code>clamp()</code> functions for fluid spacing across all device sizes</li>
<li><strong>Three Output Formats</strong> – Choose between CSS Classes, CSS Custom Properties, or Tailwind-style Utilities</li>
<li><strong>Live Preview</strong> – See your spacing at different screen sizes in real-time</li>
<li><strong>Drag & Drop</strong> – Reorder your spacing scale with intuitive drag-and-drop interface</li>
<li><strong>Mathematical Scaling</strong> – Use proven typographic ratios (Minor Second, Major Third, Perfect Fourth, etc.)</li>
<li><strong>Dual Units</strong> – Full support for both <code>px</code> and <code>rem</code> units</li>
<li><strong>Autosave</strong> – Automatic saving with manual save option for complete control</li>
<li><strong>Export Ready</strong> – Copy generated CSS code with one click</li>
</ul>
<h4>Perfect Companion</h4>
<p>Fluid Space Forge is the perfect companion to <strong>Fluid Font Forge</strong>! While typography scales smoothly across devices, your spacing should too. Together, they create cohesive, responsive design systems that work beautifully on any screen size.</p>
<h4>Output Formats</h4>
<p><strong>CSS Classes</strong><br />
Generate margin, padding, and gap classes:<br />
    .space-m-lg { margin: clamp(0.75rem, calc(0.7rem + 0.2vw), 1rem); }<br />
    .space-p-md { padding: clamp(0.6rem, calc(0.55rem + 0.18vw), 0.75rem); }<br />
    .space-g-sm { gap: clamp(0.4rem, calc(0.35rem + 0.15vw), 0.5rem); }</p>
<p><strong>CSS Custom Properties</strong><br />
Create reusable CSS variables:<br />
    :root {<br />
      –space-lg: clamp(0.75rem, calc(0.7rem + 0.2vw), 1rem);<br />
      –space-md: clamp(0.6rem, calc(0.55rem + 0.18vw), 0.75rem);<br />
    }</p>
<p><strong>Tailwind-style Utilities</strong><br />
Generate complete utility class sets:<br />
    .mt-lg { margin-top: clamp(…); }<br />
    .px-md { padding-left: clamp(…); padding-right: clamp(…); }<br />
    .gap-y-sm { row-gap: clamp(…); }</p>
<h4>Key Features</h4>
<ul>
<li><strong>Customizable Spacing Scale</strong> – Add, edit, remove, and reorder spacing sizes</li>
<li><strong>Base Value System</strong> – Calculate relative spacing from any size in your scale</li>
<li><strong>Musical Ratios</strong> – Use proven scaling ratios: 1.067, 1.125, 1.200, 1.250, 1.333</li>
<li><strong>Visual Feedback</strong> – Live preview showing spacing at min and max viewport widths</li>
<li><strong>Modal Editing</strong> – Clean interface for editing size names and properties</li>
<li><strong>Professional UI</strong> – Beautiful, intuitive admin interface with drag-and-drop support</li>
<li><strong>WordPress Integration</strong> – Located in Tools menu for easy access</li>
</ul>
<h4>Use Cases</h4>
<ul>
<li>Building responsive WordPress themes</li>
<li>Creating design system components</li>
<li>Establishing spacing tokens for custom blocks</li>
<li>Maintaining consistent spacing across projects</li>
<li>Developing fluid, accessible layouts</li>
</ul>
<h4>Browser Support</h4>
<p>CSS <code>clamp()</code> is supported in all modern browsers:<br />
* Chrome 79+<br />
* Firefox 75+<br />
* Safari 13.1+<br />
* Edge 79+</p>
<h3>Additional Information</h3>
<h4>Credits</h4>
<ul>
<li><strong>Developer</strong>: Jim R. – <a href="https://jimrforge.com" rel="nofollow ugc">JimRForge.com</a></li>
<li><strong>Development Assistant</strong>: Claude AI by Anthropic</li>
</ul>
<h4>Support</h4>
<ul>
<li><strong>Documentation</strong>:
<ul>
<li><a href="https://github.com/Mij-Strebor/fluid-space-forge/blob/master/USER-MANUAL.md" rel="nofollow ugc">User’s Guide</a> – Complete reference documentation</li>
<li><a href="https://github.com/Mij-Strebor/fluid-space-forge/blob/master/QUICK-START.md" rel="nofollow ugc">Quick Start</a> – Get started in 5 minutes</li>
<li><a href="https://github.com/Mij-Strebor/fluid-space-forge" rel="nofollow ugc">GitHub Repository</a></li>
</ul>
</li>
<li><strong>Issues</strong>: Report bugs via <a href="https://github.com/Mij-Strebor/fluid-space-forge/issues" rel="nofollow ugc">GitHub Issues</a></li>
<li><strong>Website</strong>: <a href="https://jimrforge.com" rel="nofollow ugc">JimRForge.com</a></li>
</ul>
<h4>Privacy</h4>
<p>This plugin does not collect, store, or transmit any user data. All calculations and settings are stored locally in your WordPress database.</p>
<h4>Contributing</h4>
<p>Contributions are welcome! Visit the <a href="https://github.com/Mij-Strebor/fluid-space-forge" rel="nofollow ugc">GitHub repository</a> to contribute to the project.</p>


Fluid Space Forge

Generate responsive spacing systems using CSS clamp() functions. Perfect companion to Fluid Font Forge for creating fluid design systems.

Theme Designer vs Fluid Space Forge