WordPress Theme Customizer Custom Controls

The Customizer is a relatively new way of WordPress Themes to provide you with options. Here is the visuality important, arrange the options directly in frontend for the Theme, play and save the settings.

We show you how to create your own classes to extend the controls, since not all fields and requests are in the core already. You can access existing solutions of the community or create your own classes. The first step is therefore a brief introduction for new classes and following an overview of some classes. Please extend this list via the comment form.

The following short video shows you how it looks like. I have installed various fields that are usually used and a number of issues arise in the coding. Similarly, a separate class has been incorporated as an extension of the customizer, to use text areas.

Structure of class

if ( class_exists( 'WP_Customize_Control' ) ) {
     class Example_Customize_Textarea_Control extends WP_Customize_Control {
          // todo
     }
}

Methods of class

A number of methods are available and can be overwritten.

• enqueue() – Enqueue control related scripts/styles.
• value() – Fetch a setting’s value. Grabs the main setting by default.
• to_json() – Refresh the parameters passed to the JavaScript via JSON.
• check_capabilities() – Check if the theme supports the control and check user capabilities.
• maybe_render() – Check capabilities and render the control.
• render() – Render the control. Renders the control wrapper, then calls $this->render_content().
• render_content() – Render the control’s content.

Example Enhancement

As a brief example we will create a class that enables you to use textarea elements in the customizer. The most important method is render() and it has to appear all the markup and output objects. Constructor and declared variables are not mandatory.

<?php
/**
 * Customize for textarea, extend the WP customizer
 *
 * @package    WordPress
 * @subpackage Documentation
 * @since      10/16/2012
 */

if ( ! class_exists( 'WP_Customize_Control' ) )
	return NULL;

class Example_Customize_Textarea_Control extends WP_Customize_Control {

	/**
	 * @access public
	 * @var    string
	 */
	public $type = 'textarea';

	/**
	 * @access public
	 * @var    array
	 */
	public $statuses;

	/**
	 * Constructor.
	 *
	 * If $args['settings'] is not defined, use the $id as the setting ID.
	 *
	 * @since   10/16/2012
	 * @uses    WP_Customize_Control::__construct()
	 * @param   WP_Customize_Manager $manager
	 * @param   string $id
	 * @param   array $args
	 * @return  void
	 */
	public function __construct( $manager, $id, $args = array() ) {

		$this->statuses = array( '' => __( 'Default' ) );
		parent::__construct( $manager, $id, $args );
	}

	/**
	 * Render the control's content.
	 * 
	 * Allows the content to be overriden without having to rewrite the wrapper.
	 * 
	 * @since   10/16/2012
	 * @return  void
	 */
	public function render_content() {
		?>
		<label>
			<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
			<textarea class="large-text" cols="20" rows="5" <?php $this->link(); ?>>
				<?php echo esc_textarea( $this->value() ); ?>
			</textarea>
		</label>
		<?php
	}

}

The resulting class I use, for example, in the theme documentation, downloads and maintenance status on Github. Alternatively, you can grab the class from the project WordPress-Theme-Customizer-Custom-Controls on Github, expand, improve, where there are other classes.

Collection of classes that extend the controls of the Customizer:

• WordPress-Theme-Customizer-Custom-Controls on Github
• Fork: WordPress-Theme-Customizer-Custom-Controls on Github
• WordPress-Theme-Settings-Customizer-Boilerplate on Github