wpTruss is a professional-grade architectural framework for WordPress agencies and developers. It is designed to bridge the gap between the “blank canvas” of the Block Editor and the rigid constraints of traditional page builders.
For agencies, wpTruss solves the most expensive problem in WordPress development: architectural inconsistency. Instead of rebuilding a new design system and block set for every project, wpTruss provides a standardized, token-driven foundation that ensures every block you build is consistent, performant, and governed by a centralized brand logic.
The wpTruss Philosophy
The framework is built on three core pillars:
- Token-First Design: Every visual property—from a primary brand color to a specific heading’s bottom margin—is stored as a Design Token. Change a token in the admin settings, and every block on the site updates instantly.
- Governance-First Development: wpTruss doesn’t just provide blocks; it enforces rules. The built-in Block Validator ensures that custom blocks adhere to your design tokens and security standards before they can even be registered.
- Hosting-Safe Architecture: By utilizing a plain-JavaScript (IIFE) and PHP-rendered approach, wpTruss eliminates the need for complex build toolchains (like Webpack or NPM) on the production server. It works seamlessly on standard Linux shared hosting or higher.
Core Systems
wpTruss is composed of five interlocking systems that handle the “heavy lifting” of block development:
1. Design Token Engine (--wpt-*)
The brain of the platform. It generates 141+ CSS custom properties (colors, typography scales, spacing, and shadows). This creates a “Brand API” that your CSS consumes, ensuring you never have to hardcode a hex value again.
2. Element Registry (window.wptElements)
A shared library of UI component definitions (Headings, Buttons, Lists, etc.). This allows you to set a site-wide “Button Style” once. Any block using the button element will inherit those styles automatically, while still allowing for specific per-block overrides through a 4-layer cascade.
3. Panel Registry (wptPanelRegistry)
Standardizes the Gutenberg Inspector (Sidebar). It provides pre-configured panels for Structure, Spacing, and Layout. Instead of coding your own alignment or padding controls for every block, you simply “opt-in” via block.json.
4. Block Validator
A security and design gatekeeper. When you upload a custom block, the validator checks for forbidden JS patterns (like innerHTML), ensures you aren’t using hardcoded colors, and verifies that you are respecting the V2 Motion Layer.
5. Global Structure System
Allows agencies to move beyond theme-dependency. You can design Headers and Footers as standard WordPress posts and assign them to global slots. wpTruss suppresses the active theme’s chrome and replaces it with your high-performance, token-driven templates.
Why Agencies Choose wpTruss
Standardized Handover
Because every block follows the same directory structure (block.json, index.js, render.php, index.assets.php, style.css), any developer on your team can open a project they didn’t build and understand the architecture in seconds.
No Vendor Lock-In
Unlike proprietary builders that “wrap” content in shortcodes or JSON blobs, wpTruss blocks render standard HTML via PHP. Your data remains clean, and your blocks remain standard WordPress Block Types.
Performance by Default
With the built-in Asset Bundler, wpTruss automatically detects which blocks are on a page and combines their CSS and JS into a single, minified, cached file. This eliminates render-blocking requests and maximizes Core Web Vitals scores.
How to Get Started
To begin building with wpTruss, we recommend following the documentation in this order:
- System Overview: Deep dive into the load sequence and naming conventions.
- Design Tokens: Learn how to consume the
--wpt-*variables in your CSS. - Building a New Block: Walk through the 5-file structure required to create your first custom block.
- The Block Validator: Understand the governance rules you must follow to pass the installation check.