Code Editor Field

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

Last updated: June 15, 2026

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.

Quick Links