I’ve setup na options page for a wordpress plugin. In the form I’m using a field with the wp color picker. Everything works fine an the picker does show up in that form but on submit the value of the Picker isn’t saved:
Here is the code from the plugin file:
add_action( 'admin_enqueue_scripts', 'findMeSpot_enqueue_color_picker' );
function findMeSpot_enqueue_color_picker( $hook_suffix ) {
// first check that $hook_suffix is appropriate for your admin page
wp_enqueue_style( 'wp-color-picker' );
wp_enqueue_script( 'my-script-handle', plugins_url('inc/my-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true );
}
add_action('admin_menu', 'findmespot_add_options_page');
function findmespot_add_options_page(){
add_options_page('FindMeSpot Settings', 'FindMeSpot', 'manage_options', 'findmespot', 'findMeSpot_options_page');
add_action( 'admin_init', 'register_findMeSpot_settings' );
}
function findMeSpot_options_page(){
require 'inc/options_page.php';
}
function register_findMeSpot_settings(){
register_setting('findMeSpot_display_settings_group', 'findMeSpot_display_settings');
}
and here the form:
<?php echo var_dump(get_option('findMeSpot_display_settings'))?>
<br class="clear" />
<p><strong>Settings to display the map in the frontend</strong></p>
<table class="widefat">
<thead>
<form method="post" action="options.php">
<?php settings_fields( 'findMeSpot_display_settings_group' ); ?>
<?php do_settings_sections( 'findMeSpot_display_settings_group' ); ?>
<tr>
<th class="row-title"><?php esc_attr_e( 'Setting:', 'wp_admin_style' ); ?></th>
<th><?php esc_attr_e( 'Options:', 'wp_admin_style' ); ?></th>
</tr>
</thead>
<tbody>
<tr>
<td class="row-title"><label for="tablecell"><?php esc_attr_e(
'Feed ID:', 'wp_admin_style'
); ?></label></td>
<td><input type="text" value="<?php echo get_option('findMeSpot_display_settings')['ID'] ?>" size="60" name="findMeSpot_display_settings[ID]"/><p class="description">Enter the ID of your public feed from findmespot.com. You find this ID, when you open your feed in the URL:
http://share.findmespot.com/shared/faces/viewspots.jsp?glId=<code>0XapxKiqW4RCHYhVkaCBpaHT3cNMUcEef</code></p></td>
</tr>
<tr class="alternate">
<td class="row-title"><label for="tablecell"><?php esc_attr_e(
'Map width:', 'wp_admin_style'
); ?> </label></td>
<td><input type="text" value="<?php echo get_option('findMeSpot_display_settings')['mapWidth'] ?>" name="findMeSpot_display_settings[mapWidth]" id="map_width" /><p class="description"> Enter the width of the map. 500px by default.</td>
</tr>
<tr>
<td class="row-title"><?php esc_attr_e( 'Map height:', 'wp_admin_style' ); ?></td>
<td><input type="text" value="<?php echo get_option('findMeSpot_display_settings')['mapHeight'] ?>" name="findMeSpot_display_settings[mapHeight]" id="map_width" /><p class="description"> Enter the height of the map. 500px by default.</td>
</tr>
<tr class="alternate">
<td class="row-title"><?php esc_attr_e(
'Map type:', 'wp_admin_style'
); ?></td>
<td><select name="findMeSpot_display_settings[mapType]">
<option value="ROADMAP">ROADMAP</option>
<option value="TERRAIN">TERRAIN</option>
<option value="SATELITE">SATELITE</option>
<option value="HYBRIDE">HYBRIDE</option>
</select></td>
</tr>
<tr>
<td class="row-title"><?php esc_attr_e(
'Show legend:', 'wp_admin_style'
); ?></td>
<td><input type="checkbox" value="true" name="findMeSpot_display_settings[showLegend]" checked="true"></td>
</tr>
<tr class="alternate">
<td class="row-title"><?php esc_attr_e(
'Legend height:', 'wp_admin_style'
); ?></td>
<td><input type="text" value="<?php echo get_option('findMeSpot_display_settings')['legendHeight'] ?>" name="findMeSpot_display_settings[legendHeight]" width="3"></td>
</tr>
<tr>
<td class="row-title"><?php esc_attr_e(
'Auto refresh:', 'wp_admin_style'
); ?></td>
<td><input type="text" value="<?php echo get_option('findMeSpot_display_settings')['autoRefresh'] ?>" name="findMeSpot_display_settings[autoRefresh]" width="3"><p class="description">The auto refresh interval for the track data. By default 5 minutes. You should not use less than 3 minutes because it is possible that requests can be blocked if you hit the server in an higher frequence.</p></td>
</tr>
<tr class="alternate">
<td class="row-title"><?php esc_attr_e(
'Polyline:', 'wp_admin_style'
); ?></td>
<td></td>
</tr>
<tr>
<td class="row-title"><?php esc_attr_e(
'Stroke color:', 'wp_admin_style'
); ?></td>
<td><input type="text" name="findMeSpot_display_settings[strokeColor]" value="<?php echo get_option('findMeSpot_display_settings')['strokeColor'] ?>"
class="my-color-field" data-default-color="#effeff" />
<p class="description">The color of the line on the map that connects your waypoints.</p></td>
</tr>
<tr class="alternate">
<td class="row-title"><?php esc_attr_e(
'Stroke weight:', 'wp_admin_style'
); ?></td>
<td><input type="text" name="findMeSpot_display_settings[strokeWeight]" value="3" /><p class="descritpion">The weight of the line that connects your waypoints on the map. 3px by default.</p></td>
</tr>
<tr class="alternate">
<td class="row-title"><input class="button-primary" type="submit" name="Example" value="<?php esc_attr_e( 'save changes' ); ?>" /></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="row-title"><?php esc_attr_e( 'findMeSpot-Plugin', 'wp_admin_style' ); ?></th>
<th><?php echo( '© ' . date(Y) . ' By <a href="http://www.poppgerhard.at">Popp Gerhard</a> if you need help, <a href="mailto:office@sewemo.eu"> mail me here.</a>'); ?></th>
</tr>
</tfoot>
</form>
</table>
and the enqueued script:
jQuery(document).ready(function($){
$('.my-color-field').wpColorPicker();
});
As you can see im only using the wp standard color picker and a array of settings. And i`ve no idea why the value of the picker does not append to the posts array.
Anyone a suggestion how to debug that?
Thanks and nice greets from vienna.
regards Howard
