Developer Panel

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

Last updated: March 11, 2026

Overview

The Developer Panel is a collapsible debug overlay built into the ThemePlus options panel. When enabled, it displays a live, formatted view of all currently saved option values — the exact data that themeplus_get_option() returns — making it easy to inspect field return types, verify saved values, and debug conditional logic without writing any PHP.

The Developer Panel is intended for use during theme development only and is hidden in production by default.

Enabling the Developer Panel

The Developer Panel is activated by defining the THEMEPLUS_DEV constant in your theme’s functions.php:

php

define( 'THEMEPLUS_DEV', true );

Important: THEMEPLUS_DEV must be a boolean true — not the string 'true'. Using a string will not enable the panel.

Once defined, reload the ThemePlus options panel — a Developer Panel section will appear at the bottom of the page.

Disabling for Production

Remove the constant or set it to false before deploying to production:

php

// Development only — remove or set to false before going live
define( 'THEMEPLUS_DEV', false );

Alternatively, tie the constant to the WordPress WP_DEBUG flag so it activates automatically in development environments:

php

define( 'THEMEPLUS_DEV', defined( 'WP_DEBUG' ) && WP_DEBUG === true );

This way the Developer Panel is active whenever WP_DEBUG is true in wp-config.php and inactive on production where WP_DEBUG is false.

What the Developer Panel Shows

When open, the Developer Panel displays a formatted JSON representation of all saved option values. Each entry shows:

The option ID as the key
The saved value in its native PHP type — strings, booleans, integers, arrays, and nested arrays are all represented accurately

Example output

json

{
    "primary_color": "#2271b1",
    "enable_preloader": true,
    "header_layout": "standard",
    "logo_image": 42,
    "body_typography": {
        "font-family": "Inter",
        "font-weight": "400",
        "font-size": "16px",
        "line-height": "1.6",
        "color": "#1e1e1e"
    },
    "section_padding": {
        "top": "80",
        "right": "0",
        "bottom": "80",
        "left": "0",
        "unit": "px"
    },
    "team_members": [
        {"name": "Alice", "role": "Designer", "photo": 43},
        {"name": "Bob",   "role": "Developer", "photo": 44}
    ],
    "social_links": {
        "facebook": "https://facebook.com/yourpage",
        "twitter": "",
        "instagram": ""
    }
}

Common Development Workflows

Verifying a field saves correctly

Enable THEMEPLUS_DEV.
Change a field value in the panel and click Save.
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:

Open the Developer Panel.
Check the value of the controlling field — confirm it matches the type and value in your required rule exactly.
Toggle fields are booleans — confirm the saved value is true or false, not "1" or "0".

Checking a complex field’s structure

For compound fields like Typography, Spacing, Background, and Repeater, the Developer Panel shows the full nested array — useful for confirming which sub-keys are present and what their exact values are before writing template code.

Confirming opt_name uniqueness

If you are running multiple ThemePlus-powered themes or plugins 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 THEMEPLUS_DEV is true, ThemePlus activates additional development behaviors beyond the panel overlay:

Unminified assets — JavaScript and CSS are loaded in their unminified development versions for easier browser debugging.
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.

Notes

Never deploy a theme with THEMEPLUS_DEV set to true — the Developer Panel exposes all saved option values to any logged-in admin user and loads unoptimized assets.
The recommended pattern is to tie THEMEPLUS_DEV to WP_DEBUG so it is controlled by the environment rather than requiring a manual code change between deployments.
The Developer 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.

Quick Links