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

Color Picker For Theme Options WordPress

  • SOLVED

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)

2010-12-22

Michael Fields answers:

Here's a link to [[LINK href="http://download.mfields.org/mfields-color-picker.zip"]]a simple plugin[[/LINK]] that I made to illustrate the process.


Armand Morin comments:

Michael,

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:
<?php
get_stylesheet_directory_uri();
get_template_directory_uri();
?>

2010-12-22

Nilesh shiragave answers:

Hi you can use

http://www.eyecon.ro/colorpicker/

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

2010-12-22

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 ) ?>

2010-12-22

Ehthisham tk answers:

Color picker
* Author: Stefan Petre www.eyecon.ro

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>

</div>

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

2010-12-22

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="http://wptheming.com/2010/11/thematic-options-panel-v2/"]]Check the information and how to use here.[[/LINK]]

[[LINK href="http://wptheming.com/2010/12/options-framework/"]]Read last post about it here.[[/LINK]] (here it's said that the option framework is compatible with all themes)

[[LINK href="https://github.com/devinsays/Options-Framework"]]Download it from Github[[/LINK]]