Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Color Picker For Theme Options WordPress


I need to create a field with a colorpicker attached to it. I know this should be easy, but somehow it's eluding me on this. Any help would be great.

Answers (5)


Michael Fields answers:

Here's a link to [[LINK href=""]]a simple plugin[[/LINK]] that I made to illustrate the process.

Armand Morin comments:


Thanks that helped a lot. One question, I'm relatively new to this.

How would I change...

trailingslashit( WP_PLUGIN_URL . '/' . basename( plugin_dir_path(__FILE__) ) ) . 'colorpicker.js',

To point to my theme folder.

If I can do this, I'm good and you win! :)

Michael Fields comments:

No problem! To get the path to the theme, use one of the following function:


Nilesh shiragave answers:

Hi you can use

colorpicker jquery plugin. I used it on many wordpress websites for theme options page. Even most of the premium wordpress themes use that.


Jeremy Jared answers:

You can add this just before your closing ?> at the end of the functons.php file to obtain the Wordpress custom Backgrounds which includes a custom header and background color picker:

<?php add_custom_background( $header_callback, $admin_header_callback, $admin_image_div_callback ) ?>


Ehthisham tk answers:

Color picker
* Author: Stefan Petre

load it
wp_enqueue_script("colorpicker", $file_dir."/functions/css/colorpicker.css", false, "1.0");
wp_enqueue_script("colorpicker", $file_dir."/functions/colorpicker.js", false, "1.0");

in your function.php

if this is your field div:
<div class="rm_input rm_text_c">
<label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>
<div id="<strong>colorSelector</strong>"><div class="bgstyle" style="background-color: ;"></div></div>
<input class="text_cp" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo stripslashes(get_settings( $value['id']) ); } else { echo $value['std']; } ?>" />
<small><?php echo $value['desc']; ?></small>


add this script also in your functions.php
<script type="text/javascript">
color: '#0000ff',
onShow: function (colpkr) {
return false;
onHide: function (colpkr) {
return false;
onChange: function (hsb, hex, rgb) {
jQuery('#colorSelector div').css('backgroundColor', '#' + hex);


rilwis answers:

Devin from WPTheming did a great job for this purpose. He released an option theme framework which was adopted from Woothemes framework. This option framework has built-in many input types, ajax image uploader and <strong>color picker</strong>.

At first, the option framework is used with Thematic, but now you can use it in any theme.

[[LINK href=""]]Check the information and how to use here.[[/LINK]]

[[LINK href=""]]Read last post about it here.[[/LINK]] (here it's said that the option framework is compatible with all themes)

[[LINK href=""]]Download it from Github[[/LINK]]