bradvin / dashicons-picker

A jQuery plugin to make picking dashicons in WordPress a breeze

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

dashicons-picker

A jQuery plugin to make picking Dashicons in WordPress a breeze

dashicons-picker

Installation

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

Download this entire 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.

Thanks

Thanks to these projects for inspiration, ideas and code:

About

A jQuery plugin to make picking dashicons in WordPress a breeze

License:GNU General Public License v2.0


Languages

Language:JavaScript 65.3%Language:PHP 25.5%Language:CSS 9.2%