Themergency fooplugins.com
dashicons-picker-jquery-plugin

Dashicons Picker jQuery Plugin

| 1 Comment

This is day 22 of my WordPress Developer Advent Calendar.

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:

Dashicons Picker In Action

So as you can see, you can page through the entire dashicons collection, and also search for specific icons by name if you want:

Dashicons Picker Search

A close-up screenshot of the popup:

dashicons-picker-jquery-plugin

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…

1 comments
  Livefyre
  • Get Livefyre
  • FAQ
Mark280

I was searching for a long time for something a little bit different an I've found it! Maybe someone will find it usefull too: https://code.google.com/p/select-to-image-picker-jquery/ check it out!