WORDPRESS - Oxygen - toolset

User friendly Multiple Select Field with Toolset Forms & Select2.js

Author: Aleš Sýkora, 11. 6. 2019

Using the standard multiple select field is bad. Bad for UX. Why should I hold down the CTRL when I need select more than one value? Let’s make your multiple select fields user friendly with Select2.js.

The difference

Standard Toolset ’ s Bootstrap multi select field use mouse drag & CTRL or SHIFT for multiselect.

Bootstrap 3 basic multi select field

Select2.js multi select field use only mouse click for select multiple options.

Select2.js user friendly multi select field

Try it out!

[cred-form form="multiple-select-example-without-select2" ]
[cred-form form="select2-javascript-example" ]

The method

"Install" Select2.js to WordPress

  1. Download and move Select2 dist files to your Theme folder on FTP (I am using /public_html/wp-content/themes/my-child-theme/js)
    • You can also embed the scripts from CDN. I am using FTP because it is fastest for me.
  2. Register and Enqueue scripts and CSS styles in functions.php
function enqueue_select2_jquery() {
    wp_register_style( 'select2css', '/wp-content/themes/my-child-theme/js/select2.min.css', false, '1.0', 'all' );
    wp_register_script( 'select2', '/wp-content/themes/my-child-theme/js/select2.min.js', array( 'jquery' ), '1.0', true );
    wp_enqueue_style( 'select2css' );
    wp_enqueue_script( 'select2' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_select2_jquery' );

Add Select2 Javascript to your Toolset Form

  1. Go to Toolset’s form wich contain’s multiple select form you want to use with Select2.js
    for example: [cred_field field='field-name' force_type='taxonomy' output='bootstrap' display='select']
  2. Add JS to JS editor: (.select is CSS class of multiple select field. If you want, use your own).
jQuery( document ).ready(function() {
    jQuery('.select').select2();
});

Refresh the page where selector is used. Your selector looks nice and UX is much better for user.

If you want customize your Select2.js - go to Select2 documentation. There is lot of options for customization.