20 Responses

  1. Scott Fennell
    Scott Fennell Published |

    Very timely! I was just working on this exact situation in my own theme and got off to a similar start. However, I found that I wanted the checkboxes to be draggable/sortable, as in the jQuery UI draggable interaction. I wanted the values in the hidden form input to sort themselves, whenever the checkboxes were dragged around.

    Therefore my solution ended up being much more JavaScript-y than what you have here. One thing I ended up having to do, was grab the WP core customization object, and tell it to update whenever the “drag” action was complete. I bundled that work into a jQuery plugin, which ended up being more code than I expected. However, the most relevant portion can be summarized thusly:

    // Make the checkboxes sortable.
    jQuery( sortable ).sortable({
    // Once an item is dragged and sorted, update the preview and save the JSON.
    stop: function( event, ui ) {
    update( hidden  );

    Which calls over to:

    // Grab the core WP customization object and update it.
    var api = wp.customize;
    api.instance( hiddenName ).set( outStr );
    1. Scott Fennell
      Scott Fennell Published |

      Apologies for butchering your comment syntax! I assumed backticks would frame my code.

  2. Satrya
    Satrya Published |

    I’m wondering, what is the ‘real case’ we need multiple checkbox option?

    1. Scott Fennell
      Scott Fennell Published |

      In my case, it’s allowing the user to opt into including one-to-many content chunks into a container div. This is a little weird, since widgets already do this, but I have my reasons for this project.

      In a more general sense, any time there is a logic problem where the user needs to say yes or no to multiple “sub-questions”, that are all nested under the same “parent question” (if you will), you have a strong case for a multi-checkbox.

      You might offer a rebuttal, and say that instead of a multi-checkbox, I could just have a bunch of radio buttons each assigned to their own setting in the customizer. Logically, you’re right, you could do that. But in my case it would bloat the UI. I’m able to pack more options into a setting by using multi-checkboxes.

  3. This Week in WordPress: Meetup Debate and Happy Birthday WP! - WPMU DEV
  4. Scott Fennell
    Scott Fennell Published |

    Alright, here’s a brief show-and-tell for my humble draggable/sortable multicheckboxes (HDSMCB???):


    I can imagine that this is pretty hard to read if you haven’t been swimming in it like I have lately. If there’s anything here of particular interest or mystery, I’d be happy to dive deeper toward a more precise topic.

  5. This Week in WordPress: Meetup Debate and Happy Birthday WP!
  6. Manuel Vicedo
    Manuel Vicedo Published |

    Taking it a step further, how could one implement an expandable input list in the customizer? I’m thinking something along the lines of a text field that can be replicated as many times as needed with an Add Row button.

    I’ve tried to recreate this using the Customizer API, but so far my options don’t seem to be saving. I’ve used input names to store the data as an array– ideally, they should be serialized so that they can be accessed more easily later on.

    However, I can’t seem to get them to save, especially since the fields are created on the fly.

    1. Scott Fennell
      Scott Fennell Published |

      Yeah, I was toying with that as well, although I ran out of motivation since it’s not really part of my use case at this point.

      I don’t think there’s any core/streamlined way to do this. It’s just javascript elbow grease like the other examples in this post/comment thread.

      I dunno, Justin, it sounds like the people have spoken and they would like to take you up on your offer, this time towards a repeater field!

  7. Towfiq I
    Towfiq I Published |

    Many Thanks for the excellent tutorial Justin 🙂

    As you know when the customizer has more than few controls, it takes a few extra seconds to load the controls. It fires too early hence doesnt work if the customizer takes few more seconds to load. To fix this, Instead of:

    jQuery( document ).ready( function() {

    its better to use:

    jQuery( document ).on(‘load ready’, function() {


    1. Rahul
      Rahul Published |

      It wasn’t triggering changes with $(document).ready(function().. on WordPress 4.6.1, changed it to $(document).on( 'load ready', function().. and it started working!

      Thanks Towfiq 🙂

  8. Dharmesh
    Dharmesh Published |

    I have some error in database its not sotre as array in database even not sotre in value in database I am working in Theme Customization and try to convert Theme Option Function into customization

  9. Rahul
    Rahul Published |

    I spend almost a day to come up with a utility like that but failed. Thanks a lot again, Justin, for this! I’m going to use this in my first ever premium themes for WordPress.

    You are very helpful and inspiring. Cheers from India 🙂

  10. Adrian
    Adrian Published |

    ok using this code i have few errors :

    1) add class=”customize-control-checkbox-multiple” to

    <input type="checkbox" value="” />

    2) for jquery use this :

    (function ( $ )

    ‘use strict’;

    $ ( document ).on ( ‘change’ , ‘.customize-control-checkbox-multiple input[type=”checkbox”]’ ,

    function ()


    var checkbox_values = $ ( this ).parents ( ‘.customize-control’ ).find ( ‘input[type=”checkbox”]:checked’ ).map (

    function ()


    return this.value;


    ).get ().join ( ‘,’ );

    $ ( this ).parents ( ‘.customize-control’ ).find ( ‘input[type=”hidden”]’ ).val ( checkbox_values ).trigger ( ‘change’ );



    }) ( jQuery );

  11. Max
    Max Published |


    Thank you for tutorial, I have integrated it to my plugin and it’s working fine!

  12. Gabrielle
    Gabrielle Published |

    Hello,i’m looking for something familiar to yours multi-select checkboxes,

    but as select-option dropdown list.

    And i found only 1 project on github called customizer custom controls, but something is not right with it, and i can’t deselect last value from select-dropdown list.

    What do you think, it can be js script fault, right?

    I don’t get any notice or errors from php, after using theme_mode with implode() to output array as a string i get all selected values from list, but i can’t deselect last selected value inside list.

    And there is no another similar code anywhere, it works fine when i always pick >=1 value.

    I’m desperate enough to bother people with dumb questions,sorry about that.


Leave a Reply

By submitting a comment here you grant this site a perpetual license to reproduce your words and name/Web site in attribution.

Please use your real name or a pseudonym (i.e., pen name, alias, nom de plume) when commenting. If you add your site name, company name, or something completely random, I'll likely change it to whatever I want.