Dashboard Framework

The jankx/dashboard-framework is a high-performance, React-powered administration interface for WordPress themes. It provides a modern user experience for managing theme options, settings, and dashboard widgets.

Architecture

The framework is built with a decoupled architecture, separating the JavaScript-based GUI from the PHP-based logic.

• GUI (React): Located in gui/ directory, compiled with Webpack.
• Backend (PHP): Handles routing, AJAX endpoints, and data persistence.
• Bridge: Uses standard WordPress hooks and global variables for communication.

React GUI

The GUI is built using modern React principles. It uses WordPress element abstraction to ensure compatibility with other plugins and the core block editor.

Key Components

• OptionFrameworkApp: The main entry point and state container.
• ReduxFields: A renderer that maps field configurations to React components.
• Field Components: Individual controls like IconField, MediaField, and ColorField.

// Example of an Icon Field in React
import React, { useState } from 'react';
import { Search } from 'lucide-react';

export const FieldIcon = ({ value, onChange }) => {
    // ... logic for icon picking
};

PHP Backend

The PHP part of the framework manages the registration of menus and the enqueuing of assets.

use Jankx\Option\Framework;

$framework = new Framework();
$framework->init();

// Adding a page
$framework->addPage([
    'id' => 'general',
    'title' => __('General Settings', 'jankx'),
    'icon' => 'dashicons-admin-generic'
]);

Ajax & Data

Data fetching is handled through standardized WordPress AJAX handlers. This ensures security via nonces and provides a consistent interface for the frontend.

Developed with ❤️ by Jankx Team.