我正常用的主题设置的拓展页面,看效果图:

代码:https://gist.github.com/yao3060/5028434

mythemeoption

<?php
/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
add_action('admin_menu', 'my_theme_options_menu');

function my_theme_options_menu() {
    add_action('admin_print_scripts', 'my_options_admin_scripts');
    add_action('admin_print_styles', 'my_options__admin_styles');
    add_theme_page('My Plugin Theme', 'My Theme Options', 'administrator', 'my-theme-options', 'my_theme_options_function');
    add_action('admin_init', 'register_mysettings');
    add_action('admin_init', 'my_theme_icl_register_string');
}

function register_mysettings() {
    //register our settings
    register_setting('my_theme_options', 'myoption');
}

function my_options_admin_scripts() {
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
    wp_enqueue_script('my-upload');
}

function my_options__admin_styles() {
    wp_enqueue_style('thickbox');
}

function my_theme_options_function() {
    if (!current_user_can('manage_options')) {
        wp_die(__('You do not have sufficient permissions to access this page.'));
    }
    $my_theme_options = get_option('myoption'); 
    ?>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" /> 
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>  
    <div class="wrap"> 
        <?php screen_icon(); ?>
        <h2>My Theme Options</h2>
        <form method="post" id="my_theme_options" action="options.php"> 
            <?php
            settings_fields('my_theme_options');
            ?>

            <table class="form-table" id="my_theme_options">
                <tr>
                    <th scope="row">Logo</th>
                    <td><input type="text" id="my_logo" class="image_upload"  name="myoption[logo][url]" value="<?php echo $my_theme_options[logo][url]; ?>" ></td>
                    <td>
					<?php 
					if($my_theme_options[logo][id]){
						echo wp_get_attachment_image( $my_theme_options[logo][id], array(100,100));
					}else{
						echo '<img src="'.admin_url().'/images/wordpress-logo.png"><br>';
					}
					?>
					<input type="text" name="myoption[logo][id]" value="<?php echo $my_theme_options[logo][id]; ?>"></td>
                </tr>
                <tr>
                    <th scope="row">Favicon</th>
                    <td><input type="text" id="my_favicon"  class="image_upload"  name="myoption[favicon][url]" value="<?php echo $my_theme_options[favicon][url]; ?>" ></td>
                    <td>
					<?php 
					if($my_theme_options[favicon][id]){
						echo wp_get_attachment_image( $my_theme_options[favicon][id], array(100,100));
					}else{
						echo '<img src="'.admin_url().'/images/wordpress-logo.png"><br>';
					}
					?>
					<input type="text" name="myoption[favicon][id]" value="<?php echo $my_theme_options[favicon][id]; ?>">
					</td>
                </tr>
                <tr>
                    <th scope="row">Home Background</th>
                    <td>
						<input type="text" id="my_homebg"  class="image_upload"  name="myoption[homebg][url]" value="<?php echo $my_theme_options[homebg][url]; ?>" ><br>
						<input type="text" id="my_homebg_pos" name="myoption[homebg][pos]" value="<?php echo $my_theme_options[homebg][pos]; ?>" placeholder="Background Position( 0px 0px)" ><br>
						<input type="text" id="my_homebg_repeat" name="myoption[homebg][repeat]" value="<?php echo $my_theme_options[homebg][repeat]; ?>" placeholder="Background Repeat" ><br>
						<input type="text" id="my_homebg_height" name="myoption[homebg][h]" value="<?php echo $my_theme_options[homebg][h]; ?>" placeholder="Height" >
					</td>
                    <td>
					<?php 
					if($my_theme_options[homebg][id]){
						echo wp_get_attachment_image( $my_theme_options[homebg][id], array(100,100));
					}else{
						echo '<img src="'.admin_url().'/images/wordpress-logo.png"><br>';
					}
					?>
					<input type="text" name="myoption[homebg][id]" value="<?php echo $my_theme_options[homebg][id]; ?>">
					</td>
                </tr>
                <tr>
                    <th scope="row">Contact page</th>
                    <td>
<select name="myoption[contact_id]"> 
 <option value=""><?php echo esc_attr( __( 'Select page' ) ); ?></option> 
 <?php 
  $pages = get_pages(); 
  foreach ( $pages as $page ) {
	if($my_theme_options[contact_id] == $page->ID ){ $select = 'selected="selected"'; }else{ $select = ""; }
  	echo '<option value="'. $page->ID .'" '. $select .'>'.$page->post_title.'</option>';
  }
 ?>
</select>			</td>
                    <td></td>
                </tr>
                <tr>
                    <th scope="row">
					<h2>Categroies</h2>
					<p>Press Ctrl, Mutil select the categories</p>
					</th>
                    <td>
<ol id="selectable">
<?php
$categoryIDs = explode('&', $my_theme_options[categroies][id]);

$categories=get_categories();
foreach($categories as $category) { 
	if(in_array($category->term_id, $categoryIDs)) {
		$term_class = "ui-state-default ui-selected";
	}else{
		$term_class = "ui-state-default";
	}
	echo '<li  class="'.$term_class.'" rel="'.( $category->term_id ).'">'.$category->name.'</li>';
}
?> 
</ol>
					</td>
                    <td><input type="text" id="select_result" name="myoption[categroies][id]" value="<?php echo $my_theme_options[categroies][id]; ?>"></td>
                </tr>
				<tr>
                    <th scope="row">
					 Custom Post Type 

					</th>
                    <td>
<select name="myoption[post_type]"> 	 
<?php 
$post_types=get_post_types(array(  'public'   => true,  '_builtin' => false)); 
foreach ($post_types as $post_type ) {
	if('attachment' != $post_type