WordPress主题选项 - 为Custom CSS实现代码编辑器

I'm creating a custom WordPress theme, and within my theme options, I've been trying to create an area where the user could write Custom CSS.

I'm trying to use Ace Editor in my theme; the editor works as intended, but the fields aren't saving at all.

Here's my code:

  <h2>Custom Code</h2>

  <?php
    do_settings_fields('register_custom_code','custom_code_section');
    settings_fields('cus_code_setting');
  ?>

</div>

<div class="clear"></div>
</div>


<?php
}

add_action('admin_init','register_custom_code');
function register_custom_code() {
  register_setting( 'cus_code_setting', 'custom_css', 'custom_css_validation');

  add_settings_section( 'custom_code_section', '', 'custom_code_settings_callback', 'register_custom_code' );

  add_settings_field( 'custom_css', '', 'custom_css_callback', 'register_custom_code', 'custom_code_section' );

  function custom_css_callback() {
    // The default message that will appear
    $custom_css_default = __( '/*
      Welcome to the Custom CSS editor!

      Please add all your custom CSS here and avoid modifying the core theme files, since that\'ll make upgrading the theme problematic. Your custom CSS will be loaded after the theme\'s stylesheets, which means that your rules will take precedence. Just add your CSS here for what you want to change, you don\'t need to copy all the theme\'s style.css content.
      */' );
    $custom_css = get_option( 'custom_css', $custom_css_default );
?>

<div class="wrap">
    <div id="icon-themes" class="icon32"></div>

    <h2><?php _e( 'Custom CSS' ); ?></h2>

    <?php if ( ! empty( $_GET['settings-updated'] ) ) echo '<div id="message" class="updated"><p><strong>' . __( 'Custom CSS updated.' ) . '</strong></p></div>'; ?>

    <form id="custom_css_form" method="post" action="options.php" style="margin-top: 15px;">

        <?php settings_fields( 'cus_code_setting' ); ?>

        <div id="custom_css_container">
            <div name="custom_css" id="custom_css" style="border: 1px solid #DFDFDF; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; width: 100%; height: 200px; position: relative;"></div>
        </div>

        <textarea id="custom_css_textarea" name="custom_css" style="display: none;"><?php echo $custom_css; ?></textarea>
        <p><input type="submit" class="button-primary" value="<?php _e( 'Save Changes' ) ?>" /></p>
    </form>
</div>
<?php
}

   function custom_code_settings_callback() {}
}
?>

I feel like I'm messing up on register_setting() / settings_field() as those are the methods used to handle saving setting options, but I'm not entirely sure.

I've followed this tutorial to try and implement it.