0

I'm trying to figure out how to code a custom control but frustratingly all the information I find online points to the same example of creating a single textfield.

I'd like to create a custom control which presents 4 input fields for padding (top,right,bottom,left)

<table border="0" cellpadding="1" cellspacing="0">
    <tr>
        <th>Top</th>
        <th>Right</th>
        <th>Bottom</th>
        <th>Left</th>
    </tr>
    <tr>
        <td><input type="number" name="top" min="0" max="20"></td>
        <td><input type="number" name="right" min="0" max="20"></td>
        <td><input type="number" name="bottom" min="0" max="20"></td>
        <td><input type="number" name="left" min="0" max="20"></td>
    </tr>
</table>
0

I was able to achieve my goal not by creating a custom control with multiple input fields but by creating creating a custom control which still accepted a single input, but would display inline with other controls.

Here's the custom control for an inline numerical input:

class Customizer_Number_Inline_Control extends WP_Customize_Control {
    public $fieldwidth = 'text';
    public $type = 'number';

    protected function render() {
        $id = 'customize-control-' . str_replace( '[', '-', str_replace( ']', '', $this->id ) );
        $class = 'customize-control customize-control-' . $this->type; ?>
        <li id="<?php echo esc_attr( $id ); ?>" class="<?php echo esc_attr( $class ); ?>" style="clear:none;display:inline-block;max-width:<?php echo $this->fieldwidth . "%"; ?>">
            <?php $this->render_content(); ?>
        </li>
    <?php }

    public function render_content() { ?>
        <label class="inline">
            <span class="customize-control-title" style="font-size:10px;line-height:10px;height:20px;"><?php echo esc_html( $this->label ); ?></span>
            <input type="number" <?php $this->link(); ?> value="<?php echo intval( $this->value() ); ?>" />
        </label>
    <?php }
}

I added an additional parameter to set the width of the control so if you want to have three controls inline you set each of them to 33 (33%), if you want 2 you set each of them to 50%.. etc..

Implementing this into a setting looks something like this.

$wp_customize->add_setting( 'width', array (
    'default'   => '77',
    'type'      => 'option',
) );
$wp_customize->add_control( new Customizer_Number_Inline_Control( $wp_customize, 'width', array (
    'label'     => 'Width',
    'type'      => 'number',
    'section'   => 'site',
    'priority'  => 1,
    'fieldwidth'=> '50', //set the field to 50% width so that we can display a second one next to it
) ) );

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.