1

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.

1

After 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')
    })
);
3
  • Thank you for your answer , But you registered in php 'TestControl' but in JS 'test-control' . I don't understand. Can you please make it clear ? – xs-dev Aug 10 '20 at 9:20
  • @xs-dev Because in your original codes, your class name is TestControl and your public control type is test-control – Behzad G. Aug 10 '20 at 20:10
  • Thank you very much , :) – xs-dev Aug 11 '20 at 11:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.