How to Create Sortable Checkboxes Option in Customizer

WordPress Customizer is a very powerful. Not only because we have a live preview, but also because it got a lot of build-in input type. And we can also extend it or create our own reuse-able input type.

This is not a full tutorial but only explaining the concept, but you can check the full working code here:

Data structure:

In this sortable checkboxes data, we need to save all the checkboxes value (not only the selected checkbox, but all checkboxes), but we also need to save each as active (selected) or inactive (not selected)

for example we have sharing button: Facebook, Twitter, Google+, we can save the data in array:

To make it easier, I prefer to save the data as a string using comma “,” to separate the services (checkboxes) and use colon “:” for inactive/active status for each services. here’s the example data from the array above:

facebook:1,twitter:1,google:0

How to save the data:

In this settings, i just create a hidden input, and the value is modified when user change the settings (clicking the checkboxes/sorting it).