the-customizer-wordpress-themes-gestalten-640x406

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-customizer-wordpress-themes-gestalten-640x406

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:

Comments are closed.

9 comments

  1. Tran Ngoc Tuan Anh

    Great video & the class. I did some similar thing, but not comprehensive as yours. I'll take a look at your class and maybe contribute to it.

  2. Lookbook

    Thanks for share, probobly I use these customizer in my polish fashion projetct.

  3. Vella Di

    This wordpress theme custoizer custom controls tutorials are out of my mind because i'm not so expert in these kind of customize. But surely this articles useful to other. Thanks alot !

  4. new songs 2013

    I must say that it is a very useful utility for all bloggers. thanks for this informative post. keep sharing stuff like this.
    :)

  5. Chinmoy Paul

    Thanks for sharing it. Very helpful article.

  6. Leena Dasot

    Thanks to Frank, video was like boiled rice, ready to eat.

  7. Leeva Brit

    Customizing wordpress theme is not an easy task. but it is beneficial for those who know how to play with classes. Thanks for useful info.

  8. Jimmy Handy

    The articel ist very easy to read and now i can try it to get it by myself:) Thanks for this!

  9. Marchal

    Very useful, i'm goint to do it right now