Merge pull request #16 from candypaint/master

Color Picker Support

Author: tareq1988

class.settings-api.php

@@ -39,6 +39,7 @@ public function __construct() {
      * Enqueue scripts and styles
      */
     function admin_enqueue_scripts() {
+        wp_enqueue_style( 'wp-color-picker' );
         wp_enqueue_script( 'jquery' );
         wp_enqueue_script( 'media-upload' );
         wp_enqueue_script( 'thickbox' );
@@ -329,6 +330,22 @@ function callback_password( $args ) {
         echo $html;
     }
 
+    /**
+     * Displays a color picker field for a settings field
+     *
+     * @param array   $args settings field args
+     */
+    function callback_color( $args ) {
+
+        $value = esc_attr( $this->get_option( $args['id'], $args['section'], $args['std'] ) );
+        $size = isset( $args['size'] ) && !is_null( $args['size'] ) ? $args['size'] : 'regular';
+
+        $html = sprintf( '<input type="text" class="%1$s-text wp-color-picker-field" id="%2$s[%3$s]" name="%2$s[%3$s]" value="%4$s"/>', $size, $args['section'], $args['id'], $value );
+        $html .= sprintf( '<span class="description" style="display:block;"> %s</span>', $args['desc'] );
+
+        echo $html;
+    }
+    
     /**
      * Sanitize callback for Settings API
      */
@@ -440,14 +457,16 @@ function show_forms() {
     }
 
     /**
-     * Tabbable JavaScript codes
+     * Tabbable JavaScript codes & Initiate Color Picker
      *
      * This code uses localstorage for displaying active tabs
      */
     function script() {
         ?>
         <script>
             jQuery(document).ready(function($) {
+                //Initiate Color Picker
+                $('.wp-color-picker-field').wpColorPicker();
                 // Switches option sections
                 $('.group').hide();
                 var activetab = '';

procedural-example.php

@@ -96,6 +96,13 @@ function wedevs_admin_init() {
                     'desc' => __( 'File description', 'wedevs' ),
                     'type' => 'file',
                     'default' => ''
+                ),
+                array(
+                    'name' => 'color',
+                    'label' => __( 'Color', 'wedevs' ),
+                    'desc' => __( 'Color description', 'wedevs' ),
+                    'type' => 'color',
+                    'default' => ''
                 )
             ),
             'wedevs_advanced' => array(
@@ -165,6 +172,13 @@ function wedevs_admin_init() {
                     'desc' => __( 'File description', 'wedevs' ),
                     'type' => 'file',
                     'default' => ''
+                ),
+                array(
+                    'name' => 'color',
+                    'label' => __( 'Color', 'wedevs' ),
+                    'desc' => __( 'Color description', 'wedevs' ),
+                    'type' => 'color',
+                    'default' => ''
                 )
             ),
             'wedevs_others' => array(
@@ -232,6 +246,13 @@ function wedevs_admin_init() {
                     'desc' => __( 'File description', 'wedevs' ),
                     'type' => 'file',
                     'default' => ''
+                ),
+                array(
+                    'name' => 'color',
+                    'label' => __( 'Color', 'wedevs' ),
+                    'desc' => __( 'Color description', 'wedevs' ),
+                    'type' => 'color',
+                    'default' => ''
                 )
             )
         );
@@ -273,4 +294,4 @@ function wedevs_plugin_page() {
 
         echo '</div>';
     }
-endif;
+endif;