WordPress Customizer: Using Multiple Customize Settings in Single Control

In a recent WordPress project i worked on, i needed to have an input field and a select dropdown close to each other. Below is a screenshot of what i was looking to achieve.

WordPress input and select customize controls

I had two ideas of how i would pull this off but none of them quite frankly pleased me. Here are the ideas and why i used neither.

* Create customize setting and control for the input and select fields since core already has support for input and select fields.

Going this route would have meant not being able add inline style to set the width property of the select dropdown to auto so it doesn’t have an 100% value added by Customizer to virtually every of its core controls.
Adding inline style is possible for input fields using the input_attrs argument.

* Create custom controls for the input and select fields to allow for the flexibility i craved for.

Going this route would have meant writing lots of code (register the customize settings and coding the PHP classes for the custom control for each fields) to achieve something this simple.

Reading the WordPress Customizer documentation, one would think that the standard is: for every customize settings, there can only be one corresponding customize control.

Controls are the primary Customizer object for creating UI. Specifically, every control must be associated with a setting, and that setting will save user-entered data from the control to the database (in addition to displaying it in the live-preview and sanitizing it).

I dug into the customizer components codes and discovered one or more customize settings can be used or integrated to a single customize control.

To achieve my goal, i ended up doing this – register customize settings for both fields and then combined them in a single a custom control. Let’s see some code.

The code below adds or register customize settings for both the input and select dropwdown fields.

$wp_customize->add_setting('schedule_digit_setting', array(
    'default' => '',
    'type' => 'option',
    'transport' => 'postMessage',
));

$wp_customize->add_setting('schedule_type_setting', array(
    'default' => '',
    'type' => 'option',
    'transport' => 'postMessage',
));

And below is the custom control PHP class. The trick of being able to use multiple settings in a single control is in $this->value('schedule_digit') $this->link('schedule_digit'); and $this->value('schedule_type') $this->link('schedule_type') which Render the data link attribute and fetches the settings’ value for each control.

class WP_Customize_Schedule_Fields_Control extends WP_Customize_Control
{
    /**
     * Choices/options for the select dropdown.
     *
     * @var array
     */
    public $select_choices = array();

    /**
     * HTML Attributes to add to the <select> tag
     *
     * @var array
     */
    public $select_attrs = array();

    public $type = 'email_notification_schedule';

    public function select_attrs()
    {
        foreach ($this->select_attrs as $attr => $value) {
            echo $attr . '="' . esc_attr($value) . '" ';
        }
    }

    public function render_content()
    {
        ?>
        <label>
            <?php if (!empty($this->label)) : ?>
                <span class="customize-control-title"><?php echo esc_html($this->label); ?></span>
            <?php endif; ?>
            <input type="<?php echo esc_attr($this->type); ?>" <?php $this->input_attrs(); ?> value="<?php echo esc_attr($this->value('schedule_digit')); ?>" <?php $this->link('schedule_digit'); ?> />
            <select <?php $this->link('schedule_type'); ?> <?php $this->select_attrs(); ?> >
                <?php
                foreach ($this->select_choices as $value => $label)
                    echo '<option value="' . esc_attr($value) . '"' . selected($this->value('schedule_type'), $value, false) . '>' . $label . '</option>';
                ?>
            </select>
        </label>

        <?php if (!empty($this->description)) : ?>
        <span class="description customize-control-description"><?php echo $this->description; ?></span>
    <?php endif;
    }
}

Note that schedule_digit and schedule_type are array keys holding the value of the input and select customize settings. For a better understanding of their usefulness, see the code below which add the custom control created by WP_Customize_Schedule_Fields_Control PHP class to customizer interface.

$wp_customize->add_control(new WP_Customize_Schedule_Fields_Control(
    $wp_customize,
    'email_notification_schedule',
    array(
        'label' => __('Schedule Email Campaign'),
        'section' => 'notification_settings_section',
        'settings' => [
            'schedule_digit' => 'schedule_digit_setting',
            'schedule_type' => 'schedule_type_setting'
        ],
        // specify the kind of input field
        'type' => 'text',
        'input_attrs' => ['size' => 2, 'maxlength' => 2, 'style' => 'width:auto'],
        'select_attrs' => ['style' => 'width:auto'],
        'select_choices' => [
            'minutes' => __('Minutes'),
            'hours' => __('Hours'),
            'days' => __('Days'),
        ],
        'description' => __('Configure when email newsletter will be sent out after publication.'),
        'priority' => 80
    )
));

If you have any question or contribution, use the comment form below.

La Fin!

Don’t miss out!
Subscribe to My Newsletter
Invalid email address