Code Editor Field

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

Last updated: March 11, 2026

Overview

The Code Editor field renders a syntax-highlighted, line-numbered code editor powered by CodeMirror. It returns the entered code as a plain string. Use it for custom CSS overrides, custom JavaScript snippets, Google Analytics or tag manager embed codes, or any other freeform code input in your theme options panel.

Field Registration

php

[
    'id'       => 'custom_css',
    'type'     => 'code_editor',
    'title'    => __('Custom CSS', 'your-textdomain'),
    'subtitle' => __('Add your own CSS rules — applied after the theme stylesheet', 'your-textdomain'),
    'default'  => '',
    'mode'     => 'css',
]

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`	—	Smaller descriptive text shown below the label
`desc`	`string`	—	Help text shown below the editor
`default`	`string`	—	Default code string — typically an empty string
`mode`	`string`	—	Syntax highlighting mode — `css` (default), `javascript`, `php`, `html`
`required`	`array`	—	Conditional logic rules — see Conditional Logic

Return Value

Type: string

Returns the entered code as a plain string, or the default value if nothing has been saved yet.

php

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

Usage Examples

Outputting custom CSS in the head

php

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>';
    }
});

Outputting custom JavaScript before closing body

php

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 );

Multiple code editor fields

php

themeplus_add_section([
    'id'     => 'advanced',
    'title'  => __('Advanced', 'your-textdomain'),
    'icon'   => 'fa-solid fa-code',
    'fields' => [
        [
            'id'      => 'custom_css',
            'type'    => 'code_editor',
            'title'   => __('Custom CSS', 'your-textdomain'),
            'subtitle' => __('Added inside a <style> tag in the <head>', 'your-textdomain'),
            'mode'    => 'css',
            'default' => '',
        ],
        [
            'id'      => 'custom_js_head',
            'type'    => 'code_editor',
            'title'   => __('Custom JavaScript (Head)', 'your-textdomain'),
            'subtitle' => __('Added inside a <script> tag in the <head>', 'your-textdomain'),
            'mode'    => 'javascript',
            'default' => '',
        ],
        [
            'id'      => 'custom_js_footer',
            'type'    => 'code_editor',
            'title'   => __('Custom JavaScript (Footer)', 'your-textdomain'),
            'subtitle' => __('Added inside a <script> tag before </body>', 'your-textdomain'),
            'mode'    => 'javascript',
            'default' => '',
        ],
    ],
]);

Header and footer code injection

php

// Head scripts — Google Tag Manager, analytics, fonts
add_action( 'wp_head', function() {
    $head_code = themeplus_get_option( 'header_scripts', '' );
    if ( $head_code ) {
        echo $head_code; // Already validated as raw HTML/script by admin user
    }
}, 1 );

// Footer scripts — chat widgets, tracking pixels
add_action( 'wp_footer', function() {
    $footer_code = themeplus_get_option( 'footer_scripts', '' );
    if ( $footer_code ) {
        echo $footer_code;
    }
}, 99 );

With a conditional field

php

[
    '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

The Code Editor field returns raw user input — always apply appropriate escaping before outputting. For CSS, use wp_strip_all_tags() to remove any HTML tags while preserving the CSS content. For raw HTML/script injection fields intended for admin use, document clearly that these fields accept trusted input only.
Only users with the manage_options capability can access the ThemePlus panel by default — code injection fields are safe in this context, but always add a note in the panel subtitle to make the expectation clear.
The mode option controls syntax highlighting only — it does not validate or restrict the content the user can enter.
Avoid using eval() or wp_add_inline_script() with unfiltered user content — output custom JS inside a <script> tag via wp_footer as shown above.

Quick Links