Code Editor Field

A syntax-highlighted code editor for entering custom CSS, JavaScript, HTML, PHP, or JSON.

Overview

The Code Editor field renders a full CodeMirror-powered editor with line numbers, syntax highlighting, bracket matching, auto-close brackets, and a toolbar with Copy, Format, and Clear buttons. It returns the entered code as a plain string. Use it for custom CSS overrides, custom JavaScript snippets, header/footer script injection, Google Analytics embed codes, or any other freeform code input in your theme options panel.

Field Registration

[
    'id'       => 'custom_css',
    'type'     => 'code_editor',
    'title'    => __( 'Custom CSS', 'your-textdomain' ),
    'subtitle' => __( 'Added inside a <style> tag in the <head> — applied after the theme stylesheet', 'your-textdomain' ),
    'default'  => '',
    'mode'     => 'css',
    'height'   => 300,
]

Field Options

Option	Type	Required	Description
id	string	✅	Unique field identifier — used as the option key
type	string	✅	Must be code_editor
title	string	✅	Label shown above the editor
subtitle	string	—	Descriptive text shown below the label
desc	string	—	Alternative to subtitle — shown in the same position
default	string	—	Default code string. Default: ''
mode	string	—	Syntax highlighting mode. Default: 'css' — see modes below
height	int	—	Minimum editor height in pixels. Default: 300
required	array	—	Conditional logic rules — see Conditional Logic

Supported Modes

Value	Language	Format button
'css'	CSS	✅
'javascript'	JavaScript	✅
'js'	JavaScript (alias for javascript)	✅
'html'	HTML	—
'php'	PHP	—
'json'	JSON	✅

Toolbar Buttons

• Copy — copies the current editor content to the clipboard, shows a brief “Copied!” confirmation
• Format — auto-formats the code (available for css, javascript, js, and json modes only)
• Clear — clears all content with a confirmation dialog

Return Value

Type: string

Returns the code exactly as entered, or the default value if nothing has been saved yet. Returns an empty string '' if the field was cleared and no default is set.

$css = themeplus_get_option( 'custom_css', '' );
// Returns: '.hero { background: #000; color: #fff; }'

Usage Examples

Custom CSS in wp_head

add_action( 'wp_head', function () {
    $custom_css = themeplus_get_option( 'custom_css', '' );

    if ( $custom_css ) {
        echo '<style id="mytheme-custom-css">' . wp_strip_all_tags( $custom_css ) . '</style>';
    }
} );

Custom JavaScript in wp_footer

add_action( 'wp_footer', function () {
    $custom_js = themeplus_get_option( 'custom_js', '' );

    if ( $custom_js ) {
        echo '<script id="mytheme-custom-js">' . $custom_js . '</script>';
    }
}, 99 );

Header and footer script injection

[
    'id'      => 'header_scripts',
    'type'    => 'code_editor',
    'title'   => __( 'Header Scripts', 'your-textdomain' ),
    'subtitle' => __( 'Injected before </head> — for analytics, tag manager, font embeds', 'your-textdomain' ),
    'mode'    => 'html',
    'height'  => 200,
    'default' => '',
],
[
    'id'      => 'footer_scripts',
    'type'    => 'code_editor',
    'title'   => __( 'Footer Scripts', 'your-textdomain' ),
    'subtitle' => __( 'Injected before </body> — for chat widgets, tracking pixels', 'your-textdomain' ),
    'mode'    => 'html',
    'height'  => 200,
    'default' => '',
],

add_action( 'wp_head', function () {
    $scripts = themeplus_get_option( 'header_scripts', '' );
    if ( $scripts ) {
        echo $scripts; // Capability-gated admin input — trusted content
    }
}, 1 );

add_action( 'wp_footer', function () {
    $scripts = themeplus_get_option( 'footer_scripts', '' );
    if ( $scripts ) {
        echo $scripts;
    }
}, 99 );

Multiple editors in one section

themeplus_add_section([
    'id'     => 'advanced_code',
    'title'  => __( 'Custom Code', 'your-textdomain' ),
    'icon'   => 'code',
    'fields' => [
        [
            'id'      => 'custom_css',
            'type'    => 'code_editor',
            'title'   => __( 'Custom CSS', 'your-textdomain' ),
            'mode'    => 'css',
            'height'  => 250,
            'default' => '',
        ],
        [
            'id'      => 'custom_js',
            'type'    => 'code_editor',
            'title'   => __( 'Custom JavaScript', 'your-textdomain' ),
            'mode'    => 'javascript',
            'height'  => 200,
            'default' => '',
        ],
    ],
]);

With a conditional field

[
    'id'      => 'enable_custom_code',
    'type'    => 'toggle',
    'title'   => __( 'Enable Custom Code', 'your-textdomain' ),
    'default' => false,
],
[
    'id'       => 'custom_css',
    'type'     => 'code_editor',
    'title'    => __( 'Custom CSS', 'your-textdomain' ),
    'mode'     => 'css',
    'required' => ['enable_custom_code', '==', true],
],

Notes

• For CSS output, always use wp_strip_all_tags() before echoing — this removes any HTML tags that might have been accidentally entered while preserving valid CSS.
• For HTML/script injection fields, the content is output as-is. These fields are capability-gated (only panel users can access them) — document clearly in the subtitle that these fields accept trusted input only.
• The mode option controls syntax highlighting and the Format button availability only — it does not validate or restrict what the user can enter.
• The height prop sets the minimum editor height. The editor grows beyond this as content is added.
• js is a full alias for javascript — both behave identically including the Format button.
• For simple single-line text input, use the Text field. For multi-line plain text without code highlighting, use the Textarea field.