Documentation - Juzt Orbit Theme

Theme Name: Juzt Orbit

Juzt Orbit is a minimal, high-performance WordPress base theme built for modern development workflows. It is architected around Timber/Twig and the Juzt Studio plugin, allowing developers to construct complex, data-driven pages using clean, structured JSON blueprints and visual editor tools.

✨ Core Philosophy

Juzt Orbit is designed to separate concerns completely:

• Data: Stored in editable JSON files (templates/*.json).
• Configuration: Defined in PHP schemas (schemas/*.php).
• Presentation: Rendered by clean, reusable Twig files (views/sections/*.twig).

This separation maximizes code maintainability, team collaboration, and allows for advanced features like visual editing and A/B testing.

🚀 Key Features for Developers

• Juzt Studio Integration: Fully integrated with the Juzt Studio Community plugin for managing page sections, global settings, and template structure in a dedicated admin UI.
• Modern Frontend Stack (Vite): Utilizes Vite as a development server and build tool, offering incredibly fast asset compilation and Hot Module Replacement (HMR) for instant visual feedback.
• Modular Section Building: Includes base sections (main-hero, hello-orbit) built with reusable Blocks, allowing pages to be assembled and reordered dynamically.
• Extension Ready: Automatically discovers and loads sections, snippets, and Twig paths from any installed Juzt Studio Extension, enabling seamless integration of third-party modules.
• Global Customization: Defines a settings_schema.php for managing site-wide variables (like the Main Menu and theme colors) via the Juzt Studio General Settings Editor.
• SVG Upload Support: Eliminates common WordPress security hurdles by enabling SVG file uploads natively.

⚙️ Theme Structure Overview

The theme adheres to a highly structured architecture:

Directory	Type	Purpose	How to Customize
templates/	JSON	Page Blueprints. Defines the layout order and settings data for pages (e.g., front-page.json).	Use the Juzt Studio Admin Builder to edit the contents.
schemas/	PHP	Builder Configuration. Defines the fields (settings/blocks) available in the admin UI for each section.	Edit the PHP files to add new configuration fields.
views/sections/	Twig	Reusable Components. The actual markup for each section, consuming data from the JSON templates.	Edit Twig files to change visual design or markup.
views/snippets/	Twig	Twig Views. Contains the reusable Twig files that render the snippet.	hello-orbit-feature.twig
src/classes/	PHP	Core Logic. Theme initialization, asset queuing, and Juzt Studio extension loading.	Used for deep architectural changes only.
config/	Settings	Global theme settings definitions and saved data.	Edit settings_schema.php to add global fields.

Getting Started

1. Installation

1. Ensure the Juzt Studio Community Plugin are installed and active.
2. Install Juzt Orbit as a standard WordPress theme.
3. Activate the theme.

2. Development Setup

To modify frontend assets (CSS/JS) and benefit from HMR:

1. Open your terminal in the theme root directory.
2. Install Node dependencies: pnpm install.
3. Start the development server: pnpm dev.

3. Customizing Pages

1. Go to WordPress Admin > JuztStudio CM.
2. Select the Templates tab and choose a template (e.g., Home page Front).
3. Add, reorder, or modify the settings for any section (e.g., changing the background color in the hello-orbit section).
4. The theme will instantly load the new configuration, displaying the page structure defined in the templates/*.json files.

4. Customizing Content in Twig

Theme content is accessible via the section variable within its Twig file:

• Settings: Access section level settings (e.g., colors, backgrounds) via {{ section.settings.setting_key }}.
• Blocks: Iterate over repeatable content blocks using a loop: {% for block in section.blocks %}.