Skip to content

Instantly share code, notes, and snippets.

@ericandrewlewis
Last active Jan 3, 2016
Embed
What would you like to do?
Custom CSS in WordPress, editable in the Customizer

Custom CSS in WordPress, editable in the Customizer

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.

<?php
/**
* Output the custom css in the <head> of the theme.
*/
add_action( 'wp_head', function() {
?><style>
<?php echo esc_html( get_theme_mod( 'custom_css' ) ) ?>
</style><?php
});
/**
* Register a section, setting and control for custom css with the Customizer API.
*/
add_action( 'customize_register', function( $manager ) {
global $wp_customize;
// Add a section in the Customizer control pane below
// core sections.
$wp_customize->add_section( 'custom_css', array(
'title' => __( 'Custom CSS' ),
'description' => __( 'Add custom CSS here' ),
'priority' => 160,
'capability' => 'edit_theme_options',
) );
// Create a setting object for the custom css,
// which will have the type of `theme_mod`.
$wp_customize->add_setting( 'custom_css', array(
'default' => '',
// disallow HTML in the CSS to avoid script-injection.
'sanitize_callback' => 'wp_filter_nohtml_kses',
) );
// Create the control for editing the CSS.
$wp_customize->add_control( 'custom_css', array(
'label' => __( 'Custom Theme CSS' ),
'type' => 'textarea',
'section' => 'custom_css',
) );
}, 12, 1 );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment