WordPress 3.5 New Color Picker

WordPress 3.5 have the default option for color picker. It was cool and reduced my work for color picker. I add the source code to show color picker in your wordpress form of admin section.

Add “wp-color-picker” Script and Style

<?php
add_action( 'admin_enqueue_scripts', 'bsc_enqueue_color_picker' );
function bsc_enqueue_color_picker( $hooksuffix ) {   
    /** for color picker **/
    wp_enqueue_style( 'wp-color-picker' );
    wp_enqueue_script( 'wp-color-picker' );      
}
?>

Add An Input box

<input type="text" class="bsc_color"  
    name="bsc_color"  
    value="<?php echo get_option('bsc_color'); ?>"  
    data-default-color="#effeff" />

Map “wp-color-picker” to “input box”

<script type="text/javascript">
jQuery(document).ready(function($){
    $('.bsc_color').wpColorPicker();
    
    //add more field here
    $('.bsc_bg_color').wpColorPicker();
});
</script>

More Options

var myOptions = {
    defaultColor: false,
    //color change event
    change: function(event, ui){},
    //invalid color event
    clear: function() {},
    // hide the color picker controls on load
    hide: true,
    // show a group of common colors beneath the square
    // or, supply an array of colors to customize further
    palettes: true
};
 
$('.bsc_color').wpColorPicker(myOptions);