J

API Documentation - Juzt Orbit Theme

Technical Code Documentation: Juzt Orbit Theme

This document details the architectural components, class structures, and rendering flow of the Juzt Orbit WordPress theme.

1. Theme Architecture (PHP Classes)

All core theme logic resides under the namespace JuztStack\JuztOrbit and is orchestrated by the StartSite class.

Class: `StartSite` (`src/classes/StartSite.php`)

Extends Timber\Site and serves as the main entry point for the theme's custom functionality and WordPress hook registration.

Methods Purpose & Details
__construct() Purpose: Initializes all custom theme components and calls the parent constructor.
Actions: Calls themeSupports(), and instantiates Extensions, JuztStack, Assets, SvgSupport, and Widgets.
themeSupports() Purpose: Registers all standard and custom theme features.
Hooks: after_setup_theme action.
Actions: Registers standard supports (title-tag, post-thumbnails, menus, html5, post-formats) and custom sections-builder support.
sections-builder Support Registers custom directory paths for Juzt Studio resources: sections, templates, snippets, views/sections, and schemas.

Class: `JuztStack` (`src/classes/JuztStack.php`)

Handles the global Twig path registration, specifically designed to support theme sections and folders from active extensions via the Juzt Studio Registry.

Methods Purpose & Details
loadTwig($paths) Purpose: Modifies Timber's Twig file lookup locations to include the theme's sections and snippets directories.
Hooks: timber/locations filter (priority 100).
Actions: Interacts with Core::$instance->extension_registry to dynamically add sections_dir and individual section folders from any registered extensions.

Class: `Extensions` (`src/classes/Extensions.php`)

Similar to JuztStack::loadTwig, this class explicitly focuses on ensuring Twig paths from Juzt Studio Extensions are correctly loaded by Timber.

Methods Purpose & Details
load_extensions($paths) Purpose: Retrieves all registered Juzt Studio Extensions and adds their sections_dir and snippets_dir to Timber's view path array.
Hooks: timber/locations filter (priority 100).

Utility Classes

Class Purpose & Methods
Assets (Assets.php) Handles frontend asset queuing. Registers juzt-orbit-style (style.css). Note: JavaScript assets are typically handled by Vite's HMR or production output, not shown in enqueueScripts().
SvgSupport (SvgSupport.php) Enables SVG file uploads in the WordPress Media Library and includes styles for proper SVG display in the admin area.
Widgets (Widgets.php) Placeholder class for sidebar and widget area registration logic (registerSidebarTheme() is currently empty).

2. Template Rendering Flow (PHP & JSON)

The theme uses minimal PHP files to load the JSON blueprint for the current page and delegate rendering to Timber.

Template File JSON Template ID Purpose
front-page.php front-page Renders the template for the static homepage.
page.php page Renders the template for standard WordPress pages.
single.php single Renders the template for single posts.
index.php index Fallback for blog index, archives, etc.

Execution Logic (e.g., page.php)

Php 
use \Juztstack\JuztStudio\Community\Templates;
use Timber\Timber;

// 1. Instantiate Templates class.
$template = new Templates();
// 2. Load the corresponding JSON blueprint (e.g., 'page.json').
$template_content = $template->get_json_template('page');
// 3. Prepare Timber context.
$context = Timber::context();
// 4. Inject sections data into context.
$context['order'] = $template_content['order'];
$context['sections'] = $template_content['sections'];
// 5. Render the master Twig file (which loops through sections).
Timber::render('templates/index.twig', $context);

3. Twig Templates & Data Consumption

The theme's core logic is implemented in Twig, consuming data populated by Juzt Studio from the JSON files.

Template: `templates/index.twig`

Element Purpose
{% extends "layouts/base.twig" %} Extends the global base layout.
{% for item in order %} Iterates through the section keys defined in the JSON's order array.
{% include [..] with {'section': sections[item] } %} Crucial Loop: Dynamically includes the corresponding section Twig file based on section_id, passing the section's configuration data (sections[item]) as the section variable.

Section: `views/sections/hello-orbit.twig`

This section demonstrates consumption of complex configuration data:

Twig Usage Source File Data Source
{% set bg_color = section.settings.background %} hello-orbit.twig Reads settings.background from front-page.json.
{% for block in section.blocks %} hello-orbit.twig Loops through blocks defined in the JSON.
{{ block.settings.title }} hello-orbit.twig Renders dynamic text passed from the feature or docs block settings.
{{ site.theme.link }}/images/orbit-white.svg hello-orbit.twig Retrieves theme asset path using Timber's site.theme.link.

Section: `views/sections/main-hero.twig`

Demonstrates consumption of settings to inject CSS variables and rendering repeatable blocks.

Twig Usage Purpose
{% set max_width = section.settings.max_width %} Consumes a setting to control the container width class.
style="--gradient-color-1: {{ gradient_color_1 }};..." Injects colors dynamically as CSS variables defined in style.css.
{% for slide in section.blocks %} Loops over slide blocks and renders internal block content.

Global Template Configuration

The theme includes a configuration schema for general settings:

Setting Key Type Purpose
main_menu menu Allows selecting a WordPress navigation menu via the Juzt Studio Builder.
Usage: The header.twig template retrieves this value dynamically: {% set menu_items = get_menu_items('3') %} (Hardcoded ID 3 used as placeholder).
← Back to docs