Add a color picker to your WordPress theme options page

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

[code]
wp_enqueue_script(‘jscolor.js’, get_bloginfo( ‘stylesheet_directory’ ) . ‘/js/jscolor.js’); //color picker for ‘#’ value fields
[/code]

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!

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

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