Code Editor – ACF Extended

Field Render

Display a code editor area using the built-in WP Core Codemirror library. Multiple languages highlights are available: Text/HTML, Javascript, CSS, PHP mixed & PHP plain.

Field Group

Code Editor

Field Settings

Setting name	Description
Default Value	Appears when creating a new post
Placeholder	Appears within the input
Editor mode	Code highlight type
Show Lines	Whether to show line numbers to the left of the editor
Indent Unit	How many spaces a block (whatever that means in the edited language) should be indented
Character Limit	Leave blank for no limit
Rows	Sets the textarea height
Max rows	Sets the textarea max height

Field Value

Value can then be retrieved using the common get_field() function. The returned data are decoded HTML entities. Usage example:

$code_editor = get_field('code_editor');

/*
 * <div class="my-class">
 *     <p>Lorem ipsum dolor sit amet.</p>
 *     <p>Praesent sapien massa, convallis.</p>
 * </div>
 *
 * <div class="my-class-2">
 *     <p>Lorem ipsum dolor sit amet.</p>
 *     <p>Praesent sapien massa, convallis.</p>
 * </div>
 */

Field Groups Field Settings Fields

Advanced Link Block Types PRO Button Checkbox PRO Clone Code Editor Color Picker PRO Columns PRO Countries PRO Currencies PRO Date Picker PRO Date Range Picker PRO Date Time Picker PRO Dynamic Message Field Groups PRO Field Types PRO Fields PRO File PRO Flexible Content PRO Forms Google Map PRO Google reCaptcha Group Hidden Input Image Image Selector PRO Image Sizes PRO Languages PRO Menu Locations PRO Menus PRO Options Pages PRO Phone Number PRO Post Field PRO Post Formats PRO Post Object PRO Post Statuses Post Types Radio PRO Relationship PRO Select PRO Slug Tab PRO Taxonomies Taxonomy Terms Templates PRO Textarea Time Picker PRO User Roles WYSIWYG Editor PRO

Modules WordPress Hooks & Helpers