This is an example of how to use the Customizer API to allow users to draft content, using Custom CSS as an example. See the code below.
Let's walk through how it works.
First, we'll choose the data storage strategy for custom CSS. Since CSS has a lot to do with the theme, we'll implement this as a theme modification. Let's output the CSS stored in the theme modification in wp_head. Of course, we'll escape this as html to sanitize the output.
add_action( 'wp_head', function() {
?><style>
<?php echo esc_html( get_theme_mod( 'custom_css' ) ) ?>
</style><?php
});Now, we need to rig up the Customizer to do things appropriately.
customize_register is an action that is triggered on all Customizer requests — the Customizer frame, preview requests, and save requests. On this action we'll register our Customizer objects.
We'll first create a section with the $wp_customize object's facade methods.
$wp_customize->add_section( 'custom_css', array(
'title' => __( 'Custom CSS' ),
'description' => __( 'Add custom CSS here' ),
'priority' => 160,
'capability' => 'edit_theme_options',
) );A section is a container for UI controls in the control pane. We give it a few bits of information. The section is named custom_css. Title and description to give the user context about the section, a high priority so the section renders below default sections like Site Identity, and a capability to limit the section to display to users who can edit theme options.
Next, we'll create a setting.
$wp_customize->add_setting( 'custom_css', array(
'default' => '',
// disallow HTML in the CSS to avoid script-injection.
'sanitize_callback' => 'wp_filter_nohtml_kses',
) );A setting handles data-related tasks: storing the drafted state, filtering the value in the preview request, saving the data. We'll give the setting a name of custom_css. We'll also supply a sanizitation callback to avoid script injection. This will be triggered before saving the value to the database.
Next, we'll create a control.
$wp_customize->add_control( 'custom_css', array(
'label' => __( 'Custom Theme CSS' ),
'type' => 'textarea',
'section' => 'custom_css',
) );A control creates the UI elements for editing the value of the setting. We supply the setting name custom_css to bind the control to the setting we created. We also give the section name custom_css so the UI control is dropped into the section container we created. We give it a label to give the user context, and a type of textarea, which will give the user a <textarea> to edit the custom css in.
