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)
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();
?>
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.
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 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>
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]]