How to use placeholder with Select2 and WordPress with wp_dropdown_categories
Recently while working on a site I had an issue with getting a placeholder to show up while using WordPress built in wp_dropdown_categories and Select2. The fix was pretty easy with a little bit of jQuery, which you can see below:
The problem was the method WordPress uses to set the placeholder, the text you specify for the show_option_none argument. WordPress adds this as this as the first option in the select list, but Select2 requires the first option to be blank (yes I tried just using a space in show_option_none but that did not work.
How to add placeholder with wp_dropdown_categories
So using this example below as the arguments for wp_dropdown_categories :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
$specialty = array( 'show_option_all' => '', 'show_option_none' => '', 'orderby' => 'ID', 'order' => 'ASC', 'show_count' => 0, 'hide_empty' => 1, 'child_of' => 0, 'exclude' => '', 'echo' => 1, 'selected' => 0, 'hierarchical' => 1, 'name' => 'specialty', 'id' => 'specialty', 'class' => 'specialty-signup-field', 'depth' => 0, 'tab_index' => 1, 'taxonomy' => 'specialty_category', 'hide_if_empty' => false, 'walker' => '' ); wp_dropdown_categories( $specialty ); |
And this example as our jQuery for Select2:
|
1 2 3 4 5 6 7 8 |
jQuery(function($) { $("#specialty").prepend("<option value='' selected='selected'></option>"); $('#specialty').select2({ placeholder: 'Specialty', containerCssClass: 'specialty-signup-dropdown', width: '100%' }); }); |
To explain how i’m handling this, on line 2 you will see where we are prepending a blank option to the specialty and then executing select2 on the dropdown. Because jQuery is NOT asynchronous (Ajax however is), that means our empty option will be added before select2 is initialized.
Profit!
