Display a syntax highlighted text area for inputting code. The option automatically enqueues CSS and Javascript which are inputted in the option.

Option Details & Parameters

Type: code

Returns: string

Can be placed in: Admin Panels , Admin Tabs , Meta Boxes , Theme Customizer

Parameter Type Description
name string The name of the option, for display purposes only.
id string A unique ID for this option. This ID will be used to get the value for this option.
desc string The description to display together with this option.
default string (Optional) The default value for this option.
livepreview string (Optional) jQuery code that updates something in your site in the live preview. Only used when the option is placed in a theme customizer section. Refer to Livepreview for more information on this parameter.
lang string (Optional) The language used for syntax highlighting for this option. The list of all supported languages are available in the Ace GitHub repo. Defaults to css
theme string (Optional) The color theme used in the option. The list of all supported themes are available in the Ace GitHub repo. Defaults to chrome
height int (Optional) The height of the editor in pixels. Defaults to 200

Notes on Automatic Enqueuing

To make it easier for developers, whenever you use a code option with the language (lang) attribute as css or javascript, Titan will automatically include the code in the WordPress front end.

This is especially helpful if you want to provide your users with an option to put in their custom CSS. The CSS saved by your user will automatically be included in the generated CSS file. Read the article Generate CSS Automatically for Your Options for more information about how Titan generates CSS for you.

This also works when you put a code option in your meta boxes. The css or javascript code inputted will only be included for that specific page or post.

Notes on CSS

When creating a code option with css as the language, SCSS syntax is supported.


Creating a custom CSS code input option, inputted CSS code will be automatically included for the front-end:

$panel->createOption( array(
    'name' => 'Custom CSS',
    'id' => 'custom_css',
    'type' => 'code',
    'desc' => 'Put your custom CSS rules here',
    'lang' => 'css',
) );

Creating a custom Javascript code input option, inputted Javascript code will be automatically included for the front-end:

$panel->createOption( array(
    'name' => 'Additional Javascript',
    'id' => 'additional_javascript',
    'type' => 'code',
    'desc' => 'Put your additional javascript rules here',
    'lang' => 'javascript',
) );