Bootstrap 4 Multiselect Dropdown List in Oxygen

This tutorial provides the steps to implement Bootstrap 4 multiselect dropdown list in Oxygen.

Facebook topic.

We shall register the needed css and js files using a functionality plugin, enqueue (load) them and initialize the script in the Oxygen editor.

Step 1

Install and activate My Custom Functionality plugin.

Connect to your hosting account using a FTP client and navigate to site’s /wp-content/plugins/my-custom-functionality-master.

Upload choices.min.css to the plugin’s assets/css directory.

Upload choices.min.js to the plugin’s assets/js directory.

Edit plugin.php and add the following inside the custom_enqueue_files() function:

wp_register_style( 'bootstrap-choices', plugin_dir_url( __FILE__ ) . 'assets/css/choices.min.css' );	
wp_register_script( 'bootstrap-choices', plugin_dir_url( __FILE__ ) . 'assets/js/choices.min.js', array(), '7.0.0', true );

Save/upload the file.

Step 2

Edit your Page/Template in which you would like to have the multiselect dropdown list with Oxygen.

Add a Code Block. Set its width to 100%.

PHP & HTML:

<select id="choices-multiple-remove-button" placeholder="Select up to 5 tags" multiple>
	<option value="HTML">HTML</option>
	<option value="jQuery">jQuery</option>
	<option value="CSS">CSS</option>
	<option value="Bootstrap 3">Bootstrap 3</option>
	<option value="Bootstrap 4">Bootstrap 4</option>
	<option value="Java">Java</option>
	<option value="JavaScript">JavaScript</option>
	<option value="Angular">Angular</option>
	<option value="Python">Python</option>
	<option value="Hybris">Hybris</option>
	<option value="SQL">SQL</option>
	<option value="NOSQL">NOSQL</option>
	<option value="NodeJS">NodeJS</option>
</select>

<?php
	wp_enqueue_style( 'bootstrap-choices' );
	wp_enqueue_script( 'bootstrap-choices' );
?>

JavaScript:

jQuery(document).ready(function($) {
	
	if ($("html").attr("ng-app") === "CTFrontendBuilder") return;

	var multipleCancelButton = new Choices('#choices-multiple-remove-button', {
		removeItemButton: true,
		maxItemCount:5,
		searchResultLimit:5,
		renderChoiceLimit:5
	});

});

In the above

if ($("html").attr("ng-app") === "CTFrontendBuilder") return;

ensures that this script does not run inside the Oxygen editor (thanks to Abdel of Hydrogen Pack).

That’s it! Visit the page on the frontend and you should see the multiselect dropdown list in action.

Reference