I have a theme-options page and i will that the save and reset button loaded without refresh the whole page… but i have no idea, how i can implement ajax in my theme-option… Thank you for your help.
The code is:
function mytheme_add_admin() {
global $themename, $dirname, $themeurl, $shortname, $options;
if ( $_GET['page'] == basename(__FILE__) ) {
if ( 'save' == $_REQUEST['action'] ) {
foreach ($options as $value) {
update_option( $value['id'], $_REQUEST[ $value['id'] ] ); }
foreach ($options as $value) {
if( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ] ); } else { delete_option( $value['id'] ); } }
header("Location: admin.php?page=admin_interface.php&saved=true");
die;
} else if( 'reset' == $_REQUEST['action'] ) {
foreach ($options as $value) {
delete_option( $value['id'] ); }
header("Location: admin.php?page=admin_interface&reset=true");
die;
}
else if( 'export' == $_REQUEST['action'] ) export_settings();
else if( 'import' == $_REQUEST['action'] ) import_settings();
}
$rp_page = add_menu_page($themename." Options", "".$themename." Options", 'edit_themes', basename(__FILE__), 'mytheme_admin');
add_action("admin_print_scripts-$rp_page", 'rp_load_only');
add_action("admin_print_styles-$rp_page",'rp_style_only');
}
function rp_style_only() {
$file_dir=get_bloginfo('template_directory');
wp_enqueue_style("admin_style", $file_dir."/functions/admin/css/admin_style.css", false, "1.0", "all");
wp_enqueue_script("colorpicker", $file_dir."/functions/admin/js/jquery.color.picker.js", false, "1.0");
wp_enqueue_script("tabs", $file_dir."/functions/admin/js/jquery.tabs.js", false, "1.0");
wp_enqueue_script("custom", $file_dir."/functions/admin/js/custom.js", false, "1.0");
}
function mytheme_admin() {
global $themename, $dirname, $themeurl, $shortname, $options;
if ( $_REQUEST['saved'] ) echo '<div id="message" class="updated"><p><strong>Options Saved</strong></p></div>';
if ( $_REQUEST['reset'] ) echo '<div id="message" class="updated"><p><strong>Options Reset</strong></p></div>';
?>
<div id="repra-panel" class="wrap">
<div id="header">
<div id="icon-rp" class="icon32 icon32-rp"></div>
<h2><?php _e("Options Panel","repra"); ?></h2>
</div>
<div id="info_bar">
<div class="button-zone">
<input type="submit" name="save" value="Save changes" class="button-primary" />
<input type="hidden" name="action" value="save" />
</div>
</div><!--.info_bar-->
<div class="clear"></div>
<div id="panels">
<?php foreach ($options as $value) {
switch ( $value['type'] ) {
case "open":
?>
<?php break;
case "close":
?>
</div>
<?php break;
case "title":
?>
<div class="panel option-tab" title="<?php echo $value['name']; ?>">
<?php break;
case "header":
?>
<div class="option option-header">
<h3><?php echo $value['name']; ?></h3>
<div class="option-desc"><?php echo $value['desc']; ?></div>
</div>
<?php break;
case "divider":
?>
<div class="divider"></div>
<?php break;
case 'text':
?>
<div class="option">
<h3><?php echo $value['name']; ?></h3>
<input name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?>" class="theme-input" />
<?php if($value['extras'] == "uploadbutton") { ?><a href="media-upload.php?post_id=&type=image&TB_iframe=true&width=640&height=500" id="add_image" class="thickbox button" title='Add an Image' onclick="return false;">Get Image</a><?php } ?>
<div class="option-desc"><?php echo $value['desc']; ?></div>
</div>
<?php break;
case 'text_small':
?>
<div class="option">
<h3><?php echo $value['name']; ?></h3>
<input name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="text" value="<?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?>" class="theme-input text-small" />
<div class="option-desc"><?php echo $value['desc']; ?></div>
</div>
<?php break;
case 'dimension':
?>
<div class="option dimensions">
<h3><?php echo $value['name']; ?></h3>
<input name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="text" value="<?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?>" class="theme-input" /><span>px</span>
<div class="option-desc"><?php echo $value['desc']; ?></div>
</div>
<?php
break;
case 'textarea':
?>
<div class="option">
<h3><?php echo $value['name']; ?></h3>
<textarea name="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" cols="" rows="" class="theme-textarea<?php if($value['height'] == "yes") { ?> large-textarea<?php } ?>"><?php if ( get_settings( $value['id'] ) != "") { echo stripslashes(get_settings( $value['id'] )); } else { echo $value['std']; } ?></textarea>
<div class="option-desc"><?php echo $value['desc']; ?></div>
</div>
<?php
break;
case 'select':
?>
<div class="option">
<h3><?php echo $value['name']; ?></h3>
<select class="theme-select" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>"><?php foreach ($value['options'] as $option) { ?><option value="<?php echo $option; ?>" <?php if ( get_settings( $value['id'] ) == $option) { echo ' selected="selected"'; } ?>><?php echo $option; ?></option><?php } ?></select>
<div class="option-desc"><?php echo $value['desc']; ?></div>
</div>
<?php
break;
case "checkbox":
?>
<div class="option <?php if($value['extras'] == "multi") { ?>multi-checkbox<?php } ?>">
<h3><?php echo $value['name']; ?></h3>
<? if(get_settings($value['id'])){ $checked = "checked="checked""; }else{ $checked = ""; } ?><input class="theme-checkbox" type="checkbox" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" value="true" <?php echo $checked; ?> />
<div class="theme-checkbox-desc"><?php echo $value['desc']; ?></div>
</div>
<?php
break;
case "radio":
?>
<div class="option">
<h3><?php echo $value['name']; ?></h3>
<?php foreach ($value['options'] as $key=>$option) {
$radio_setting = get_option($value['id']);
if($radio_setting != ''){
if ($key == get_option($value['id']) ) {
$checked = "checked="checked"";
} else {
$checked = "";
}
}else{
if($key == $value['std']){
$checked = "checked="checked"";
}else{
$checked = "";
}
}?>
<div class="theme-radio-wrapper">
<input type="radio" name="<?php echo $value['id']; ?>" id="<?php echo $value['id'] . $key; ?>" value="<?php echo $key; ?>" <?php echo $checked; ?> /><label for="<?php echo $value['id'] . $key; ?>"><?php echo $option; ?></label>
</div>
<?php } ?>
<div class="option-desc"><?php echo $value['desc']; ?></div>
</div>
<?php
break;
case "colorpicker":
?>
<div class="option option-colorpicker">
<h3><?php echo $value['name']; ?></h3>
<div class="section">
<div class="element">
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#<?php echo $value['id']; ?>").ColorPicker({
onSubmit: function(hsb, hex, rgb) {
$("#<?php echo $value['id']; ?>").val("#"+hex);
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
return false;
},
onChange: function (hsb, hex, rgb) {
$("#cp_<?php echo $value['id']; ?> div").css({"backgroundColor":"#"+hex, "backgroundImage": "none", "borderColor":"#"+hex});
$("#cp_<?php echo $value['id']; ?>").prev("input").attr("value", "#"+hex);
}
})
.bind('keyup', function(){
$(this).ColorPickerSetColor(this.value);
});
});
</script>
<input type="text" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?>" class="cp_input" />
<div id="cp_<?php echo $value['id']; ?>" class="cp_box">
<div style="background-color:<?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo '#fff'; } ?>;<?php if ( get_settings( $value['id'] ) != "") { echo 'background-image:none; border-color:' . get_settings($value['id']) . ';'; } ?>">
</div>
</div>
</div>
<div class="clear"></div>
<div class="option-desc">Click the text box for color picker.</div>
</div>
</div>
<?php
break;
case "import_export":
?>
</form>
<div class="option submit">
<h3>Import Theme Settings</h3>
<div class="option-desc">If you have a back up of your theme settings you can import them below.</div>
<form method="post" enctype="multipart/form-data">
<p><input type="file" name="file" id="file" />
<input type="submit" name="import" value="Upload" /></p>
<input type="hidden" name="action" value="import" />
</form>
</div>
<div class="divider"></div>
<div class="option submit">
<h3>Export Theme Settings</h3>
<div class="option-desc">If you want to create a back up of all your theme settings click the Export button below. <em>Note: This option only backs up your theme settings and not your post/page data.</em></div>
<form method="post">
<p><input name="export" type="submit" value="Export Theme Settings" /></p>
<input type="hidden" name="action" value="export" />
</form>
</div>
<?php
break;
}}
?>
</div>
<div class="clear"></div>
<div class="theme-buttons-bottom submit">
<form method="post" onSubmit="if(confirm('Are you sure you want to reset all the theme settings?')) return true; else return false;">
<input name="reset" type="submit" value="Reset" />
<input type="hidden" name="action" value="reset" />
</form>
<div class="clear"></div>
<?php }
if (function_exists('wp_enqueue_style')) {
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-ui-sortable');
wp_enqueue_script('thickbox');
wp_enqueue_style('thickbox');
}
add_action('admin_menu', 'mytheme_add_admin');
// Export Theme Settings
function export_settings() {
global $options;
header("Cache-Control: public, must-revalidate");
header("Pragma: hack");
header("Content-Type: text/plain");
header('Content-Disposition: attachment; filename="theme-options-'.date("dMy").'.dat"');
foreach ($options as $value) $theme_settings[$value['id']] = get_settings( $value['id'] );
echo serialize($theme_settings);
}
// Import Theme Settings
function import_settings() {
global $options;
if ($_FILES["file"]["error"] > 0) {
echo "Error: " . $_FILES["file"]["error"] . "<br />";
} else {
$rawdata = file_get_contents($_FILES["file"]["tmp_name"]);
$theme_settings = unserialize($rawdata);
foreach ($options as $value) {
if ($theme_settings[$value['id']]) {
update_option( $value['id'], $theme_settings[$value['id']] );
$$value['id'] = $theme_settings[$value['id']];
} else {
if ($value['type'] == 'checkbox_multiple') $$value['id'] = array();
else $$value['id'] = $value['std'];
}
}
}
if (in_array('cacheStyles', get_option('theme_misc'))) cache_settings();
wp_redirect($_SERVER['PHP_SELF'].'?page=admin_options.php');
}
?>
