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.
very nice, used it with our themes.
veri,veri good.Nice joob,i love it.
Alisothegeek and Your tutorial solved hours of searching ! Thumbs UP
Thanks guys. Just added a slider the other day. That’s next.
Another great tutorial. I just added this and it works just as it should. Great job.
Any idea when the slider tutorial is gonna be published
Slider will be my next blog entry. Thanks for checking in.
thanks for great ideas
No Problem. Thanks for checking in…
Hey
it’s really a great tut thanks a lot
but i have a little problem the color picker doesn’t show color
just like this picture
https://www.dropbox.com/s/2dywqjsaywi071n/color%20picker.jpg
and i really don’t know what to do
can you help me
@mohammed – That’s likely and issue with your implementation of colorpicker.js. I do not know how the color is drawn in the box of the top of my head, but I suspect you have some sort of file path problem going on.