Adding a Draggable/Sortable Multi-Checkbox Control to the WordPress Customizer

Justin Tadlock has made the world an offer: Come up with an idea for a new control in the WordPress customizer, and he’ll provide some help in coding it, or suggest a contact who perhaps can. Today, he blogged about a multi-checkbox control, which I have been working on lately as well. My example incorporates a sortable/draggable interaction that I’d like to add to the discussion via a brief tutorial.

When I say draggable/sortable, I am referring to the jQueryUI interaction. Here’s how it would look when we’re done:

drag

I have a text field showing after the checkbox group, storing the content and order of the checkboxes. That would be swapped to a hidden form input for production, but for now it’s helpful to see the values change in the text field. You’ll also note that some of the checkboxes contain <select> menus, a feature that bloats my code far beyond beyond what I was expecting.

This ended up being a lot of JavaScript, probably more than I am qualified to write, and definitely more than I’m qualified to write about, but if the worst thing that can happen is that someone explains why it’s a hack, I’ll learn from it. So, here it is:

And the php component:

There is a bit more work to do, to register settings that use this custom control, but there is robust documentation on that elsewhere: