This guide covers fields designed for handling rich content, custom code, and assets from the WordPress Media Library. These fields provide powerful, integrated experiences for content management directly within your settings page.
wysiwygwp_kses_post() to ensure the HTML is safe and compliant.extra: editor_settingsYou can customize nearly every aspect of the editor by passing an array to the 'editor_settings' key. This array is passed directly to the WordPress wp_editor() function.
Common editor_settings options:
'textarea_rows' (int): The number of rows (height) for the editor.'media_buttons' (bool): Whether to display the “Add Media” button.'teeny' (bool): Set to true to output a minimal editor with only the most basic controls.'quicktags' (bool): Whether to display the Text/Visual tabs.For a complete list of options, see the official WordPress Developer documentation for wp_editor().
$page->add_field(
'site_footer_bio',
'content_section',
'wysiwyg',
'Footer Biography',
[
'description' => 'This content will appear in the site footer.',
'default' => '<h2>About Us</h2><p>We are an awesome company.</p>',
'editor_settings' => [
'textarea_rows' => 8,
'media_buttons' => false, // Don't allow images in the bio
'teeny' => true, // Use the minimal "teeny" editor
],
]
);
code_editorextras'mode' (string): (Required) Specifies the language for syntax highlighting. The value should be a valid MIME type.
'text/css', 'application/javascript', 'text/html', 'application/json'.'editor_settings' (array): An array of advanced settings passed directly to the CodeMirror instance. You can control things like indentation, line numbers, and themes. See the CodeMirror documentation for available options.$page->add_field(
'header_scripts',
'advanced_section',
'code_editor',
'Header Scripts',
[
'description' => 'Add scripts to the <head> of your site. Use with caution.',
'mode' => 'text/html',
'html_attributes' => [
'rows' => 10,
],
'editor_settings' => [
'lineNumbers' => true,
'indentUnit' => 4,
],
]
);
media123).extra: media_settingsUse the 'media_settings' array to customize the Media Library modal window.
'title' (string): The title displayed at the top of the media modal.'button_text' (string): The text on the primary “Select” button in the modal.'library_type' (string): Restrict the library to a specific media type. Common values are 'image', 'video', 'audio'. Leave empty to allow all types.$page->add_field(
'site_logo',
'branding_section',
'media',
'Site Logo',
[
'description' => 'Upload or select the primary logo for the website.',
'media_settings' => [
'title' => 'Choose a Logo',
'button_text' => 'Use this Logo',
'library_type' => 'image', // Only allow images to be selected
],
]
);
media_multiplemedia field, but allows the user to select multiple items from the Media Library. Previews for all selected items are displayed.[123, 456, 789]).extra: media_settingsThe 'media_settings' options work the same as for the single media field but are best phrased for a multi-selection context.
$page->add_field( 'homepage_gallery', 'content_section', 'media_multiple', 'Homepage Gallery Images', [
'description' => 'Select multiple images to display in the homepage gallery.',
'media_settings' => [
'title' => 'Build Your Gallery',
'button_text' => 'Add to Gallery',
],
]);
These fields provide a robust way to manage complex content. The next guide will explore the various date and time picker fields available in the framework.
Next: 7. Fields: Date and Time