Themergency

Dashicons Picker jQuery Plugin

Since the release of WordPress 3.8, there has been a bit of talk around using the new Dashicons within your themes and plugins. Most notably:

  • Using WordPress 3.8′s dashicons in your theme or plugin
  • Using Dashicons for Custom Post Types
  • Adding Dashicons in WordPress

I really liked these ideas, and after finding the Boostrap IconPicker plugin and the very similar Bootstrap Icon Picker, I thought it would be fun to create a clone, but utilizing the Dashicons icon font instead.

Hello Dashicons Picker

I created a very small Dashicons Picker jQuery plugin which allows you to visually pick your dashicon and it returns the class name of the selected icon. Here it is in action:

Installation

To include the dashicons picker in your plugin is pretty easy. First, include both the dashicons-picker.css and dashicons-picker.js files:

function dashicons_picker_scripts() {
	$css = plugin_dir_url( __FILE__ ) . 'css/dashicons-picker.css';
    wp_enqueue_style( 'dashicons-picker', $css, array( 'dashicons' ), '1.0' );
	$js = plugin_dir_url( __FILE__ ) . 'js/dashicons-picker.js';
	wp_enqueue_script( 'dashicons-picker', $js, array( 'jquery' ), '1.0' );
}
add_action( 'admin_enqueue_scripts', 'dashicons_picker_scripts' );

Together, the 2 files are less than 8KB. And that is unminified, which is very small indeed. And as you can see in the code above, the CSS file is dependent on ‘dashicons’ so that will automatically include the stylesheets needed to view the dashicons font.

Then in your HTML, give the button a class or “dashicons-picker” and include a data-target attribute which stores the selector to the textbox:

<input class="regular-text" id="dashicons_picker_example_icon1" type="text" />
<input class="button dashicons-picker" type="button" value="Choose Icon" data-target="#dashicons_picker_example_icon1" />

Plugin Example

I included a very simple plugin example in the repo. All you need to do download the whole repo as a zip, and install it like you would any other plugin. A new settings page called “Dashicons Picker Example” will be available where you can play with the icon picker.

Check out the Github repo and contribute to it if you like…