J

Juzt Studio Plugin Documentation

Overview

The Juzt Studio Community plugin is an essential tool for WordPress developers and theme builders who utilize Timber/Twig and a JSON template structure (similar to Shopify) to create flexible, data-driven themes. It provides a dedicated admin interface (Template Builder) and core utilities to manage templates, sections, and global theme settings.

Text 
Version: 1.11.0

Autor: JuztStack

Description: Customizer editor for general settings and JSON templates.

Lisence: MIT

Key Feature

Builder & Content Management

Unified Resource Discovery:

Automatically discovers and indexes all available content resources (Sections, Templates, Snippets) from the active Theme, any compatible Extensions, and the Core plugin.

Template Builder:

A dedicated administrative interface for visually constructing complex page layouts by dragging and dropping Twig Sections into a JSON template structure.

Section Schema Support:

Reads PHP schemas (schemas/*.php) to generate dynamic configuration fields and define configurable Blocks within sections.

General Settings Editor:

Provides an interface to define and manage global theme settings (e.g., colors, logo, social links) saved in a central JSON file.

WordPress Resource Pickers:

Built-in fields to easily link content to specific Posts, Pages, Products, Taxonomy Terms, Navigation Menus, and Sidebars by ID.

Code Editor Modal:

Allows expanding code/HTML inputs into a dedicated modal for easier editing of large code snippets.

Runtime & Preview

Timber/Twig Integration:

Seamlessly integrates with Timber/Twig, providing custom functions and filters to simplify frontend development.

Shopify-style Media Handling:

Provides Twig filters (|attachment_url, |attachment_img) to convert saved WordPress Attachment IDs into usable URLs and HTML tags.

Template Preview Mode:

Enables live preview of different templates on any page via a URL parameter (?view=template-name) or client-side JavaScript, maintained via a cookie.

Preview Bar:

A frontend bar clearly indicates when a template preview is active and offers a quick exit option.

Asset Management:

Supports loading extension assets from compiled production files or through a Vite development server for modern, high-speed theme development.

System requirements

Requirement Minimum
Wordpress 5.8 or higher
PHP 7.4 or higher
Dependencies Timber/Timber 2.3+

Installation and usage

Installation

Manually
  • Download the plugin as ZIP file
  • Go to Wordpress Admin > Plugins > Add New > Upload plugin
  • Upload the ZIP file
  • Activate the Plugin

Usage

Download the theme base to begin development. To get started please go to Github repository and then fork the theme.

You can use the Juzt deploy plugin to clone your fork and the continue with the work.

Accessing the Builder

  1. Go to WordPress Admin > JuztStudio CM (Menu item).

  2. The main interface allows you to:

Templates Tab: Load, edit, or create new JSON templates.

Sections Tab: View all available Twig sections discovered from your theme, core, and any registered extensions.

Settings Tab: Configure global theme variables (if a settings_schema.php is defined).

  1. Managing Templates

Creating a Layout: Select a template or create a new one, then drag sections from the Sections Tab into the main editor area.

Configuring Sections: Click on a section's header to expand its settings panel.

Settings: Configure properties like colors, sizes, and text content defined by the section's schema.

Blocks: Add repeatable content units (Blocks) as defined in the section's schema (e.g., a "Slide" block in a "Slider" section).

Saving: Click the Save button. The plugin will save the configuration to the corresponding .json file and, if saving to the theme, can optionally create the necessary PHP and Twig file stubs.

Advanced features

Extension System

The plugin includes an Extension Registry that automatically discovers and indexes resources from other plugins designed as Juzt Studio extensions. This allows you to combine sections and templates from multiple sources (e.g., a core plugin and a third-party module) seamlessly.

Javascript template switching

The front end includes the JuztTheme JavaScript API with methods for managing the template preview cookie:

JuztTheme.switchTemplate(templateName): Switches the current page template (without reloading the page) by fetching the new template HTML via AJAX and updating the DOM.

JuztTheme.switchToOriginal(): Clears the preview cookie and reverts the template to the original WordPress-selected one.

← Back to docs