How to add color picker in wordpress theme options

Question

I want to add color picker in theme options.I added to theme options under appearance in that I try to add color picker.Here theme options and other PHP code I added in functions.php file only.I want to understand the flow.so far I added checkbox,input now I want to add color picker.i was tried but not getting. I'm new to WordPress feel free to explain any mistakes.Here I used default theme twenty seventeen can anyone suggest me how to add color picker according to my code? code here

    /******** Theme options *******/

 /**
 * Create A Simple Theme Options Panel
 *
 */

 // Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
  exit;
}

 // Start Class
 if ( ! class_exists( 'WPEX_Theme_Options' ) ) {

class WPEX_Theme_Options {

    /**
     * Start things up
     *
     * @since 1.0.0
     */
    public function __construct() {

        // We only need to register the admin panel on the back-end
        if ( is_admin() ) {
            add_action( 'admin_menu', array( 'WPEX_Theme_Options', 'add_admin_menu' ) );
            add_action( 'admin_init', array( 'WPEX_Theme_Options', 'register_settings' ) );
        }

    }

    /**
     * Returns all theme options
     *
     * @since 1.0.0
     */
    public static function get_theme_options() {
        return get_option( 'theme_options' );
    }

    /**
     * Returns single theme option
     *
     * @since 1.0.0
     */
    public static function get_theme_option( $id ) {
        $options = self::get_theme_options();
        if ( isset( $options[$id] ) ) {
            return $options[$id];
        }
    }

    /**
     * Add sub menu page
     *
     * @since 1.0.0
     */
    public static function add_admin_menu() {
        add_theme_page(
            esc_html__( 'Theme Options', 'text-domain' ),
            esc_html__( 'Theme Options', 'text-domain' ),
            'manage_options',
            'theme-settings',
            array( 'WPEX_Theme_Options', 'create_admin_page' )
        );
    }

    public static function register_settings() {
        register_setting( 'theme_options', 'theme_options', array( 'WPEX_Theme_Options', 'sanitize' ) );
    }

    /**
     * Sanitization callback
     */
    public static function sanitize( $options ) {



        // If we have options lets sanitize them
        if ( $options ) {

            // Checkbox
            if ( ! empty( $options['checkbox_example'] ) ) {
                $options['checkbox_example'] = 'on';
            } else {
                unset( $options['checkbox_example'] ); // Remove from options if not checked
            }

            // Input
            if ( ! empty( $options['input_example'] ) ) {
                $options['input_example'] = sanitize_text_field( $options['input_example'] );
            } else {
                unset( $options['input_example'] ); // Remove from options if empty
            }

            // Select
            if ( ! empty( $options['select_example'] ) ) {
                $options['select_example'] = sanitize_text_field( $options['select_example'] );
            }

        }

        // Return sanitized options
        return $options;

    }

    /**
     * Settings page output
     *
     * @since 1.0.0
     */
    public static function create_admin_page() { ?>

        <div class="wrap">

            <h1><?php esc_html_e( 'Theme Options', 'text-domain' ); ?></h1>

            <form method="post" action="options.php">

                <?php settings_fields( 'theme_options' ); ?>

                <table class="form-table wpex-custom-admin-login-table">

                    <?php // Checkbox example ?>
                    <tr valign="top">
                        <th scope="row"><?php esc_html_e( 'Checkbox Example', 'text-domain' ); ?></th>
                        <td>
                            <?php $value = self::get_theme_option( 'checkbox_example' ); ?>
                            <input type="checkbox" name="theme_options[checkbox_example]" <?php checked( $value, 'on' ); ?>> <?php esc_html_e( 'Checkbox example description.', 'text-domain' ); ?>
                        </td>
                    </tr>

                    <?php // Text input example ?>
                    <tr valign="top">
                        <th scope="row"><?php esc_html_e( 'Input Example', 'text-domain' ); ?></th>
                        <td>
                            <?php $value = self::get_theme_option( 'input_example' ); ?>
                            <input type="text" name="theme_options[input_example]" value="<?php echo esc_attr( $value ); ?>">
                        </td>
                    </tr>

                    <?php // Select example ?>
                    <tr valign="top" class="wpex-custom-admin-screen-background-section">
                        <th scope="row"><?php esc_html_e( 'Select Example', 'text-domain' ); ?></th>
                        <td>
                            <?php $value = self::get_theme_option( 'select_example' ); ?>
                            <select name="theme_options[select_example]">
                                <?php
                                $options = array(
                                    '1' => esc_html__( 'Option 1', 'text-domain' ),
                                    '2' => esc_html__( 'Option 2', 'text-domain' ),
                                    '3' => esc_html__( 'Option 3', 'text-domain' ),
                                );
                                foreach ( $options as $id => $label ) { ?>
                                    <option value="<?php echo esc_attr( $id ); ?>" <?php selected( $value, $id, true ); ?>>
                                        <?php echo strip_tags( $label ); ?>
                                    </option>
                                <?php } ?>
                            </select>
                        </td>                       
                    </tr>
                    <tr valign="top">
                            <th scope="row"><?php esc_html_e( 'Background Color', 'text-domain' ); ?></th>
                    </tr>
                </table>

                <?php submit_button(); ?>

            </form>

        </div><!-- .wrap -->
    <?php }

   }
 }
 new WPEX_Theme_Options();

 // Helper function to use in your theme to return a theme option value
  function myprefix_get_theme_option( $id = '' ) {
    return WPEX_Theme_Options::get_theme_option( $id );
  }

so, far output image.

Answer 1

Step 1) Enqueue the “wp-color-picker” jquery script and style

add_action( 'admin_enqueue_scripts', 'mw_enqueue_color_picker' );
function mw_enqueue_color_picker( $hook_suffix ) {
    // first check that $hook_suffix is appropriate for your admin page
    wp_enqueue_style( 'wp-color-picker' );
    wp_enqueue_script( 'my-script-handle', plugins_url('my-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true );
}

Step 2) Add an input (example: text input) to the interface where you want the color picker

<input class="my-color-field" type="text" value="#bada55" data-default-color="#effeff" />

Step 3) Call “wpColorPicker” object from your script

Remember that we enqueued my-script.js above Open it up, and add this code in my-script.js.

jQuery(document).ready(function($){
    $('.my-color-field').wpColorPicker();
});

That’s it.