I followed this link to learn about how to create a custom control for customizer in Wordpress. According to their doc, I made a control using this code
wp.customize.control.add(new wp.customize.DateTimeControl('birthdate', {
label: 'Birthdate',
description: "Someone was born on this day.",
section: 'my_custom_section',
includeTime: false,
setting: new wp.customize.Value('2000-01-02')
}));
It's ok but DateTimeControl is default control of Wordpress. I want to make my own custom control form PHP. Here is my Custom control in php
<?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 TestControl extends \WP_Customize_Control {
/**
* @access public
* @var string
*/
public $type = 'test-control';
/**
* @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 );
}
public function content_template(){
?>
<div>
<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>
</div>
<?php
}
}
Basically I want to create control in Wordpress Customizer in Javascript from my existing control that has been written in PHP. Sorry for my bad English, I hope you got my point.
I followed this link to learn about how to create a custom control for customizer in Wordpress. According to their doc, I made a control using this code
wp.customize.control.add(new wp.customize.DateTimeControl('birthdate', {
label: 'Birthdate',
description: "Someone was born on this day.",
section: 'my_custom_section',
includeTime: false,
setting: new wp.customize.Value('2000-01-02')
}));
It's ok but DateTimeControl is default control of Wordpress. I want to make my own custom control form PHP. Here is my Custom control in php
<?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 TestControl extends \WP_Customize_Control {
/**
* @access public
* @var string
*/
public $type = 'test-control';
/**
* @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 );
}
public function content_template(){
?>
<div>
<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>
</div>
<?php
}
}
Basically I want to create control in Wordpress Customizer in Javascript from my existing control that has been written in PHP. Sorry for my bad English, I hope you got my point.
Share Improve this question asked May 12, 2020 at 8:25 xs-devxs-dev 153 bronze badges1 Answer
Reset to default 1After adding your custom control class, you need to register your control like below code, then you can call your control via JS
function prefix_customize_register( $wp_customize ) {
$wp_customize->register_control_type( 'TestControl' );
}
add_action( 'customize_register', 'prefix_customize_register' );
Then via JS, like this:
api.control.add(
new api.Control( 'birthdate', {
type: 'test-control',
label: 'Birthdate',
description: "Someone was born on this day.",
section: 'my_custom_section',
includeTime: false,
setting: new api.Value('2000-01-02')
})
);