Show Color Picker Value Code Within Input Text Field in Wordpress
- by Shwan Namiq
Hi i have options page for my theme i used color picker jquery plugin in my options page as show in image below.
i want when i change the color from color picker automatically show the color value code within the text field.how can do this?
this is the code within my options page related to appearing the color picker and text field
function to register the options setting
function YPE_register_settings_sections_fields() {
register_setting (
'YPE_header_option_group',
'YPE_header_option_name',
'YPE_sanitize_validate_callback'
);
add_settings_section (
'YPE_header_section',
'Header Section',
'YPE_header_section_callback',
'YPE_menu_page_options'
);
add_settings_field (
'YPE_header_bg',
'Header Background',
'YPE_header_bg_callback',
'YPE_menu_page_options',
'YPE_header_section'
);
}
add_action('admin_init', 'YPE_register_settings_sections_fields');
function to appear the text field and color picker
function YPE_header_bg_callback() {
$YPE_options = get_option('YPE_header_option_name');
$YPE_header_bg = isset($YPE_options['YPE_header_bg']) ? $YPE_options['YPE_header_bg'] : '';
?>
<div class="input-group color-picker">
<input class="form-control" style="width:80px;" name="YPE_header_option_name[YPE_header_bg]" id="<?php echo 'YPE_header_bg'; ?>" type="text" value="<?php echo $YPE_header_bg; ?>" />
<span class="input-group-btn">
<div id="colorSelector">
<div nam style="background-color: #0000ff">
</div>
</div>
</span>
</div>
<script>
$("#colorSelector").ColorPicker({
color: '#0000ff',
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
$('#colorSelector div').css('backgroundColor', '#' + hex);
});
</script>
<?php
}
