Developer Panel

A built-in debugging tool for inspecting saved option values during theme development.

Overview

The Developer Panel is a dedicated section built into the ThemePlus options panel sidebar. When active, it shows every registered field with its current saved value, PHP data type, dependency metadata, and copy-ready code snippets for all three access patterns — making it easy to verify field return shapes, debug conditional logic, and write template code without guessing.

The Developer Panel is intended for theme development only. It activates automatically based on your environment and is never shown in production unless you explicitly force it on.

How Dev Mode Activates

The Developer Panel appears automatically when any of the following conditions is met, checked in this priority order:

1. THEMEPLUS_DEV constant — explicit override, highest priority:

// wp-config.php
define( 'THEMEPLUS_DEV', true );

2. WordPress debug mode:

// wp-config.php
define( 'WP_DEBUG', true );

3. Local environment — activates automatically when WP_ENVIRONMENT_TYPE is 'local'. Local by Flywheel sets this automatically, so the Developer Panel appears on every Local site without any configuration.

To force the Developer Panel off regardless of environment — for example on a staging server where WP_DEBUG may be true — define the constant explicitly:

// wp-config.php
define( 'THEMEPLUS_DEV', false );

THEMEPLUS_DEV must be a boolean true or false — not a string. The constant always takes priority over all other conditions.

You do not need to add anything to your theme’s themeplus_framework_config() call — dev mode detection happens automatically behind the scenes.

What the Developer Panel Shows

Each registered field appears as a card showing:

• The field ID and type
• The current saved value in its native PHP type
• Dependency metadata (the required rule if one exists)
• Copy-ready code snippets for themeplus_get_option(), direct array access, and themeplus_update_option()

The panel reads directly from the saved database values — it reflects the state after the last Save, not the current unsaved state of the panel fields.

Example output shapes

The Developer Panel shows values exactly as they are stored and returned by themeplus_get_option(). Some examples of what you will see for different field types:

{
    "primary_color": "#7F27FF",
    "enable_preloader": true,
    "header_layout": "standard",
    "logo_image": {
        "id": 42,
        "url": "https://example.com/wp-content/uploads/logo.png",
        "width": 300,
        "height": 100,
        "alt": "My Logo",
        "title": "Logo"
    },
    "body_typography": {
        "font-family": "Inter",
        "font-weight": "400",
        "font-size": "16",
        "line-height": "1.6",
        "letter-spacing": "0",
        "text-transform": "none",
        "font-style": "normal",
        "subsets": ["latin"]
    },
    "card_border": {
        "width": 1,
        "style": "solid",
        "color": "#e2e4e9",
        "radius": 8
    },
    "section_padding": {
        "top": 80,
        "right": 0,
        "bottom": 80,
        "left": 0,
        "unit": "px"
    },
    "team_members": [
        {
            "name": "Alice",
            "role": "Designer",
            "photo": {
                "id": 43,
                "url": "https://example.com/wp-content/uploads/alice.jpg",
                "width": 300,
                "height": 300,
                "alt": "Alice",
                "title": "Alice"
            }
        }
    ],
    "social_links": [
        { "platform": "github",    "url": "https://github.com/yourhandle" },
        { "platform": "instagram", "url": "https://instagram.com/yourhandle" }
    ]
}

Common Development Workflows

Verifying a field saves correctly

1. Enable dev mode (or open a Local site where it activates automatically).
2. Change a field value in the panel and click Save.
3. Open the Developer Panel and confirm the key exists with the expected value and type.

Debugging a conditional logic rule

If a field is not showing or hiding as expected:

1. Open the Developer Panel.
2. Check the value of the controlling field — confirm it matches the type and value in your required rule exactly.
3. Toggle fields return booleans — confirm the saved value is true or false, not "1" or "0".
4. Check the dependency metadata card for the dependent field — it shows the parsed condition and which format is being used.

Confirming a structured field’s shape

For compound fields like Typography, Background, Border, Spacing, Repeater, and Group, the Developer Panel shows the full nested structure — use it to confirm which sub-keys are present and what their exact values and types are before writing template code.

Confirming opt_name uniqueness

If you are running multiple ThemePlus-powered themes on the same site, open the Developer Panel on each and confirm the returned data belongs to the correct opt_name. Duplicate opt_name values cause one theme to overwrite another’s options.

Additional Dev Mode Behaviors

When dev mode is active, ThemePlus enables additional behaviors beyond the Developer Panel:

• Vite HMR — the Vite dev server can be started (npm run dev) for SCSS hot module replacement in the admin panel.
• Console logging — the React panel logs state changes, save events, and conditional logic evaluations to the browser console.
• Error boundaries — React component errors display a detailed stack trace overlay instead of silently failing.
• Dev-only REST endpoint — /wp-json/themeplus/v1/dev-panel becomes available, returning field metadata and statistics.

Notes

• The Developer Panel reads saved database values — it always reflects the state after the last Save, not the current unsaved panel state. Save first, then check the panel.
• Never deploy with THEMEPLUS_DEV = true — it loads development assets and exposes field data to panel users. Use the constant to force it off on any server where auto-detection might incorrectly activate it.
• The dev-panel REST endpoint (/wp-json/themeplus/v1/dev-panel) is only registered when dev mode is active — it returns 404 in production.