Apply theme.json style variations per page or let visitors switch styles on the frontend (FSE block themes).

Kadim Gültekin

Block Style Modifiers

Add multiple block styles to Gutenberg blocks with ease.

4wpdev

Anatoliy Dovgun

<h4>Demo</h4>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/JDGOF2B2zqQ?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
4WP Style Switcher reads style variations from the active block theme (<code>theme.json</code> and <code>/styles/*.json</code>).
A plugin by <a href="https://4wp.dev/" rel="nofollow ugc">4wp.dev</a>. 4WP is our project brand; the letters “WP” appear only as part of that brand name, not as a reference to WordPress. This plugin is not affiliated with, endorsed, or sponsored by WordPress.
Source code and releases: <a href="https://github.com/4wpdev/4wp-style-switcher" rel="nofollow ugc">github.com/4wpdev/4wp-style-switcher</a>
<h4>Development</h4>
Human-readable PHP source is in the public GitHub repository above. The plugin ZIP includes <code>src/</code> (PSR-4 autoload via <code>src/Autoload.php</code> when <code>vendor/</code> is absent). No npm build step — front-end scripts ship as plain JS in <code>assets/</code>.
Live demo (WordPress Playground): https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/4wpdev/4wp-style-switcher/v1.0.0/.wordpress-org/assets/blueprints/blueprint.json
The demo site Style Switcher uses Twenty Twenty-Five: About, Morning, Afternoon, and Evening pages with per-page styles, A/B light vs dark, a bottom-right visitor switcher, and Light/Dark in the header and footer menus.
Page style (editor) — pick a variation for a page; optionally lock it so visitors cannot override it.
Frontend switcher — visitors choose from allowed variations; the choice is stored in localStorage and synced to a cookie for server-side rendering.
Light / Dark (navigation block) — add the Light/Dark block inside Navigation; map two variations (sun/moon icons).
A/B testing — split new visitors between two variations; daily aggregate stats monitor the traffic split.
<h4>Privacy</h4>
When the visitor switcher or A/B testing is enabled, the plugin may store the selected style variation in a browser cookie (<code>forwp_ss_style</code>) and in localStorage on the visitor device. No personal data is sent to third-party services. A/B stats are aggregated counts stored in your WordPress database.
<h3>Blocks</h3>
This plugin provides 1 block.
<ul>
<li>
Light / Dark — menu toggle between two mapped theme style variations (sun/moon icons).Hooks (developers)
</li>
<li>
<code>forwp_style_switcher_variations</code> — filter theme variation list.
</li>
<li><code>forwp_style_switcher_ab_assigned</code> — after A/B cohort assignment.</li>
<li><code>forwp_style_switcher_analytics_track</code> — analytics events.</li>
<li><code>forwp_style_switcher_ab_assignment_enabled</code> — filter A/B assignment.</li>
</ul>

Alternatives to 4WP Style Switcher

Top alternatives