Jeremy Felt

Happy Prime

slocker

philcable

<p>When managing a brand across many sites, it is often necessary to ship changes to the look and feel with the certainty that they will be applied immediately.</p>
<p>In its current iteration, the WordPress site editor allows individual site administrators to make changes to a theme’s templates and template parts. Once a template or a template part has been edited on an individual site, it no longer receives updates from the theme automatically, which may in turn cause unintended consequences.</p>
<p>This plugin provides a way for site administrators to edit parts of the site without accidentally overwriting pieces that should remain consistent.</p>
<p>Network Template Parts works in tandem with <a href="https://github.com/happyprime/restrict-network-templates" rel="nofollow ugc">Restrict Network Templates</a>, which restricts the editing of templates on individual sites.</p>
<h3>Assumptions</h3>
<h3>Templates provided by the theme should not be edited.</h3>
<p>A theme’s core structure is defined by templates. (e.g. <code>templates/home.html</code>)</p>
<p>It should be possible to set a structure in these templates and assume that they will not be overridden on individual sites.</p>
<h3>Network-level template parts are managed by network administrators.</h3>
<p>Parts of a theme’s structure rely on data from the main site on a network. (e.g. global navigation)</p>
<p>It should be possible for a template to specify that a section of a page is rendered in the context of the main site.</p>
<h3>Site-level template parts are managed by site administrators.</h3>
<p>Parts of a theme’s structure rely on data from individual sites on a network. (e.g. site navigation, content)</p>
<p>It should be possible to override site-level template parts from an individual site.</p>
<h3>Block</h3>
<p>The Network Template Part block renders a selected template part in either a “site” or “network” context.</p>
<p>Attributes:</p>
<ul>
<li><code>slug</code> determines which template part to load. Template parts are located in a theme’s <code>parts/</code> directory.</li>
<li><code>context</code> determines the context in which the part should render.</li>
</ul>
<h3>Examples</h3>
<p>Often, a network will provide common header and footer areas while leaving the site content between to site administrators. With Network Template Parts, this can be accomplished as so:</p>
<p>A <code>templates/index.html</code> file may contain:</p>
<pre><code>


</code></pre>
<p>></p>
<p>This loads <code>parts/header.html</code> from the main site on the network, <code>parts/main-index.html</code> from the current site, and <code>parts/footer.html</code> from the main site on the network.</p>
<p>The <code>parts/header.html</code> file main contain:</p>
<pre><code>

</code></pre>
<p>></p>
<p>This defines two areas in the header to be managed at the network level. The <code>parts/header-main.html</code> may contain something like:</p>
<pre><code>
<div class="wp-block-group">
    
    <header class="wp-block-group">
        
        
    </header>
    
</div>

</code></pre>
<p>></p>
<p>This provides some common HTML structure, loads a network-level logo, and also provides a site-level navigation in <code>parts/header-main-site-navigation.html</code>.</p>
<p>Now, an individual site administrator can make changes to a navigation menu while also receiving updates from the theme and the network if the look and feel of the broader network changes.</p>

Network Template Parts

Render template parts in a site or network context.

pixelgrade

vlad.olaru

George Olaru

Razvan Onofrei

Madalin Gorbanescu

<p>Style Manager generates and coordinates colors, typography, and spacing for compatible WordPress themes and blocks.</p>
<p>Instead of tuning isolated colors, font sizes, and spacing values by hand, you work with connected design decisions that can flow through the editor, the active theme, compatible blocks, and the front end.</p>
<p>Themes that support Style Manager apply the system across site templates and theme details. Compatible blocks can adapt to the same design decisions in context, so sections and blocks feel like part of one site rather than separate styling work.</p>
<p>In Style Manager 2.3, the main styling flow is available in the Site Editor, with visual preview boards, editor-canvas previews, and a Live Site preview for reviewing unsaved changes before publishing.</p>
<h4>Free compatible stack</h4>
<p>You can try Style Manager with this free Pixelgrade stack:</p>
<ul>
<li><a href="https://github.com/pixelgrade/anima" rel="nofollow ugc">Anima</a> provides the theme-level integration.</li>
<li><a href="https://wordpress.org/plugins/nova-blocks/" rel="ugc">Nova Blocks</a> provides compatible blocks that can respond to the same design system.</li>
</ul>
<p>Style Manager also integrates with Pixelgrade LT themes, but premium themes are not required to try the free Anima and Nova Blocks path.</p>
<h4>What you can shape</h4>
<ul>
<li>Color palettes with generated roles for compatible themes and blocks.</li>
<li>Typography choices for headings, body copy, and details.</li>
<li>Spacing and rhythm controls that keep layouts consistent.</li>
<li>Theme-supported tweaks and motion settings.</li>
<li>Live editor previews before saving.</li>
<li>Context-aware styling for blocks and sections that support Style Manager.</li>
</ul>
<h4>Compatibility</h4>
<p>Style Manager is not a universal page builder and does not make every theme or block support every control.</p>
<p>The full experience depends on your active theme and blocks being built to read Style Manager’s design decisions. If a theme or block does not support a specific Style Manager feature, the related controls may be hidden or may not affect that theme or block’s output.</p>
<h3>Issues</h3>
<p>If you identify any errors or have an idea for improving the plugin, please open an <a href="https://github.com/pixelgrade/style-manager/issues?stage=open" rel="nofollow ugc">issue</a>. We’re more than excited to see what the community thinks of this project, and we welcome your input!</p>
<p>If GitHub is not your thing, but you are passionate about Style Manager and want to help us make it better, don’t hesitate to <a href="https://pixelgrade.com/contact/" rel="nofollow ugc">reach us</a>.</p>
<h3>Credits</h3>
<ul>
<li><a href="https://select2.github.io" rel="nofollow ugc">Select2</a> JavaScript library – License: MIT</li>
<li><a href="https://ace.c9.io/" rel="nofollow ugc">Ace Editor</a> JavaScript editor – License: BSD</li>
<li><a href="https://github.com/natedavisolds/jquery-react" rel="nofollow ugc">jQuery React</a> JavaScript jQuery plugin – License: MIT</li>
<li><a href="https://github.com/typekit/webfontloader" rel="nofollow ugc">Web Font Loader</a> JavaScript library – License: Apache 2.0</li>
<li><a href="http://fusejs.io" rel="nofollow ugc">Fuse.js</a> Lightweight fuzzy-search JavaScript library – License: Apache 2.0</li>
<li><a href="https://carbonfields.net/" rel="nofollow ugc">CarbonFields</a> WordPress Custom Fields Library – License: GPLv2</li>
<li>Default <a href="https://unsplash.com/photos/OgM4RKdr2kY" rel="nofollow ugc">image</a> for Style Manager Color Palette control – License: <a href="https://unsplash.com/license" rel="nofollow ugc">Unsplash</a></li>
</ul>
<h3>Privacy & External Services</h3>
<p>Style Manager uses external services to deliver some design assets.</p>
<p><strong>Pixelgrade Cloud (cloud.pixelgrade.com)</strong></p>
<p>To provide color palettes, font palettes, and curated design configurations, the plugin can fetch design assets from Pixelgrade Cloud. This request is made from the WordPress admin, not from your site’s frontend, and the response is cached locally.</p>
<p>When fetching design assets, the plugin sends: your site URL, whether the site uses SSL, your WordPress version, the Style Manager version, and your active theme’s slug, name, URI, version, and text domain. No personal data about your site’s visitors is sent or collected, and the plugin does not load tracking or analytics scripts.</p>
<ul>
<li>Service: Pixelgrade Cloud</li>
<li>Provider: Pixelgrade – https://pixelgrade.com</li>
<li>Privacy Policy: https://pixelgrade.com/privacy/</li>
<li>Web fonts referenced by font palettes are served by Google Fonts (https://fonts.googleapis.com / https://fonts.gstatic.com). See Google’s Privacy Policy at https://policies.google.com/privacy.</li>
</ul>


Style Manager

Generate and coordinate colors, typography, and spacing across compatible WordPress themes and blocks.

Network Template Parts vs Style Manager