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.

piftoworks

<p>PFT – Widget Spacing Control adds margin-top / margin-bottom inputs (desktop and mobile, separately) to every widget’s settings form. Negative values are supported, so you can both expand and tighten the space between widgets without adding empty spacer widgets.</p>
<h4>Features</h4>
<ul>
<li>Per-widget top and bottom margin (px) for desktop and mobile</li>
<li>Negative values supported (e.g. <code>-10</code> to tighten the gap)</li>
<li>Empty value falls back to the theme default</li>
<li>No settings page — inputs appear directly inside each widget’s form</li>
<li>Works with any theme (sidebar / widget area)</li>
<li>No external CSS file. No JavaScript. Single PHP file</li>
<li>No tracking. No external requests</li>
</ul>
<h4>How priority is guaranteed</h4>
<p>To make sure your margin settings always win over theme and other plugin CSS:</p>
<ol>
<li>A triple-ID selector (<code>#id#id#id</code>) raises specificity to 0-3-0-0, beating typical theme selectors.</li>
<li><code>!important</code> is added on every declaration as a second line of defense.</li>
<li>Styles are output via <code>wp_footer</code> at priority 9999, so they load after all other styles.</li>
</ol>
<p>Media queries are used to switch between desktop and mobile values cleanly (inline styles are intentionally avoided because inline <code>!important</code> would override <code>@media</code> rules).</p>
<h4>Responsive breakpoints</h4>
<ul>
<li>Desktop: 769px and above</li>
<li>Mobile: 768px and below</li>
</ul>
<h3>Privacy</h3>
<p>This plugin does not collect, store, or transmit any personal data. It only stores numeric margin values inside each widget’s settings.</p>


PFT – Widget Spacing Control

Set per-widget top and bottom margins separately for desktop and mobile. Supports negative values.

Theme Designer vs PFT – Widget Spacing Control