Custom Butterbean Control: multiple inputs

2 Replies ·

  1. Hey Justin,

    I am using Butterbean in my project, and I have a custom color picker control.

    I use the same control in the customizer, and I recently added some features that require storing more data than just the color. Using the customizer api, I was able to connect multiple settings to a single control.

    I am trying to replicate this in the Butterbean version of the control, but am a bit stuck. How can I save and retrieve the values of multiple inputs within a single control? I see that there are different types of settings (‘multiple’ ‘array’ etc) but am unsure how to utilize these.

    My current color control files are nearly identical to the standard Butterbean color picker. But I want to add a checkbox and a hidden input field to the template.


  2. Justin Tadlock

    First, let me apologize for my late reply to this topic. My computer broke on Tuesday morning, and I’ve been scrambling to get everything set back up and running.

    Multiple settings per control is possible. However, it requires that you have a custom control, which seems like what you have.

    First thing’s first. $settings is an array of key/value pairs. You’ll want any calls to your control to specifically set these.

    Let’s say you have 2 different fields that are passed into your control like this:

    'settings' => array(
        'default'   => 'color_setting_name',
        'secondary' => 'secondary_setting_name'

    In your to_json() method, you’ll need to specifically get any data that you want to pass to your control’s template. The default setting will be automatically set up. It’s the default. Any custom ones will need to be set up separately.

    So, in your custom to_json() method, you’d do something like this:

    $this->json['secondary_value'] = isset( $this->settings['secondary'] ) ? $this->get_value( 'secondary' )      : '';
    $this->json['secondary_field_name'] = isset( $this->settings['secondary'] ) ? $this->get_field_name( 'secondary' ) : '';

    Then, you can use data.secondary_value and data.secondary_field_name in your Underscore template.

    I also want to note that I haven’t really fully tested multiple settings per control. It wasn’t something high on the to-do list when I first developed this. But, it should work.

  3. sky


    Thanks so much! I was able to figure it out from your examples. It was more like the customizer api than I was expecting.

    Bummer about the computer, but now you have an excuse to buy a new one? That’s always fun!

    Take care and have a great weekend.