Add a color picker to your WordPress theme options page

This is by request and quite frankly quite simple. The following builds on  ”Multiple upload inputs in a WordPress theme options page?” If you theme options page is constructed in a different manner, it’s still possible this will still be of help.

First, get the script

I like jscolor. It’s simple, lightweight and real easy to use. Go there, download it and put it in your script folder.

Enqueue the script

wp_enqueue_script('jscolor.js', get_bloginfo( 'stylesheet_directory' ) . '/js/jscolor.js'); //color picker for '#' value fields

Call the script

If you read the JSColor documentations, you’ll notice that the script will be called on any text input with the CSS class “color”. Well that’s convenient!

$this->settings['h1_color'] = array(
 'section' => 'styles',
 'title' => __( 'H1' ),
 'desc' => __( 'Select a H1 color' ),
 'class' => 'color', // Custom class for CSS
 'type' => 'text',
 'std' => '333',
 );

Nothing new there with the exception of adding a ‘color’ class. And that’s it.