Authors to be able to customize their author pages?

Question

I'm trying to implement a sliding control panel where logged in users can change background colors, fonts, etc. the point being that they should only be able to do it on their own author pages, nowhere else.

So to put it simply: User logs in, goes to his author page and the slider appears from where he can customize the appearance of the said author page.

I have the slider working, but how can I save the customizations for each author page, so every user can have customized author page?

Usually these kind of control panel sliders are used for the whole site where admin can do the customizations for the whole site and they are saved to a cookie. This one works the same way currently, but should I save the selections to database for each user or what?

All recommendations, suggestions and everything else is most welcome.

Here's how the control panel works from functions.php:

    add_action('header_top','control_panel');function control_panel(){
    $admin_access = apply_filters( 'showcontrol_panel', current_user_can('switch_themes') );
    if ( !$admin_access ) return;
    if ( get_option('show_control_panel') <> 'on' ) return;
    global $bg_texture_urls, $google_fonts; ?>
    <div id="et-control-panel">
        <div id="control-panel-main">
            <a id="et-control-close" href="#"></a>
            <div id="et-control-inner">
                <h3 class="control_title">Example Colors</h3>
                <a href="#" class="et-control-colorpicker" id="et-control-background"></a>

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

                <?php 
                    $sample_colors = array( '6a8e94', '8da49c', 'b0b083', '859a7c', 'c6bea6', 'b08383', 'a4869d', 'f5f5f5', '4e4e4e', '556f6a', '6f5555', '6f6755' );
                    for ( $i=1; $i<=12; $i++ ) { ?>
                        <a class="et-sample-setting" id="et-sample-color<?php echo $i; ?>" href="#" rel="<?php echo $sample_colors[$i-1]; ?>" title="#<?php echo $sample_colors[$i-1]; ?>"><span class="et-sample-overlay"></span></a>
                <?php } ?>


                <h3 class="control_title">Texture Overlays</h3>
                <div class="clear"></div>

                <?php 
                    $sample_textures = $bg_texture_urls;
                    for ( $i=1; $i<=count($bg_texture_urls); $i++ ) { ?>
                        <a title="<?php echo $sample_textures[$i-1]; ?>" class="et-sample-setting et-texture" id="et-sample-texture<?php echo $i; ?>" href="#" rel="bg<?php echo $i+1; ?>"><span class="et-sample-overlay"></span></a>
                <?php } ?>

                <?php 
                    $google_fonts = $google_fonts;
                    $font_setting = 'Lobster';
                    $body_font_setting = 'Droid+Sans';
                    if ( isset( $_COOKIE['header_font'] ) ) $font_setting = $_COOKIE['header_font'];
                    if ( isset( $_COOKIE['body_font'] ) ) $body_font_setting = $_COOKIE['body_font'];
                ?>

                <h3 class="control_title">Fonts</h3>
                <div class="clear"></div>

                <label for="control_header_font">Header
                    <select name="control_header_font" id="control_header_font">
                        <?php foreach( $google_fonts as $google_font ) { ?>
                            <?php $encoded_value = urlencode($google_font); ?>
                            <option value="<?php echo $encoded_value; ?>" <?php selected( $font_setting, $encoded_value ); ?>><?php echo $google_font; ?></option>
                        <?php } ?>
                    </select>
                </label>
                <a href="#" class="et-control-colorpicker et-font-control" id="et-control-headerfont_bg"></a>
                <div class="clear"></div>

                <label for="control_body_font">Body
                    <select name="control_body_font" id="control_body_font">
                        <?php foreach( $google_fonts as $google_font ) { ?>
                            <?php $encoded_value = urlencode($google_font); ?>
                            <option value="<?php echo $encoded_value; ?>" <?php selected( $body_font_setting, $encoded_value ); ?>><?php echo $google_font; ?></option>
                        <?php } ?>
                    </select>
                </label>
                <a href="#" class="et-control-colorpicker et-font-control" id="et-control-bodyfont_bg"></a>
                <div class="clear"></div>

            </div> <!-- end #et-control-inner -->
        </div> <!-- end #control-panel-main -->
    </div> <!-- end #et-control-panel -->
<?php
}
add_action( 'template_redirect', 'load_scripts' );
function load_scripts(){
    $slider_type = apply_filters( 'slider_type', get_option('slider_type') );
    $template_dir = get_bloginfo('template_directory');
    wp_enqueue_script('jquery_cycle', $template_dir . '/js/jquery.cycle.all.min.js', array('jquery'), '1.0', false);
    $admin_access = apply_filters( 'showcontrol_panel', current_user_can('switch_themes') );
    if ( $admin_access && get_option('show_control_panel') == 'on' ) {
        wp_enqueue_script('colorpicker', $template_dir . '/js/colorpicker.js', array('jquery'), '1.0', true);
        wp_enqueue_script('eye', $template_dir . '/js/eye.js', array('jquery'), '1.0', true);
        wp_enqueue_script('cookie', $template_dir . '/js/jquery.cookie.js', array('jquery'), '1.0', true);
        wp_enqueue_script('control_panel', get_bloginfo('template_directory') . '/js/control_panel.js', array('jquery'), '1.0', true);
    }
}
add_action( 'wp_head', 'set_bg_properties' );
function et_bg_properties(){
    global $bg_texture_urls;
    $bgcolor = '';
    $bgcolor = ( isset( $_COOKIE['bgcolor'] ) && get_option('show_control_panel') == 'on' ) ? $_COOKIE['bgcolor'] : get_option('bgcolor');
    $bgtexture_url = '';
    $bgimage_url = '';
    if ( get_option('bgimage') == '' ) {
        if ( isset( $_COOKIE['texture_url'] ) && get_option('show_control_panel') == 'on' ) $bgtexture_url =  $_COOKIE['texture_url'];
        else {
            $bgtexture_url = get_option('bgtexture_url');
            if ( $bgtexture_url == 'Default' ) $bgtexture_url = '';
            else $bgtexture_url = get_bloginfo('template_directory') . '/images/body-bg' . ( array_search( $bgtexture_url, $bg_texture_urls )+2 ) . '.png';
        }
    } else {
        $bgimage_url = get_option('bgimage');
    }
    $style = '';
    $style .= '<style type="text/css">';if ( $bgcolor <> '' ) $style .= 'body { background-color: #' . $bgcolor . '; }';
    if ( $bgtexture_url <> '' ) $style .= 'body { background-image: url(' . $bgtexture_url . '); }';
    if ( $bgimage_url <> '' ) $style .= 'body { background-image: url(' . $bgimage_url . '); background-position: top center; background-repeat: no-repeat; }';
    $style .= '</style>';
    if ( $bgcolor <> '' || $bgtexture_url <> '' || $bgimage_url <> '' ) echo $style;
}

add_action( 'wp_head', 'font_properties' );
function font_properties(){
    $font_style = '';
    $font_color = '';
    $font_family = '';
    $font_color_string = '';

    if ( isset( $_COOKIE['header_font'] ) && get_option('show_control_panel') == 'on' ) $header_font =  $_COOKIE['header_font'];
    else {
        $header_font = get_option('header_font');
        if ( $header_font == 'Lobster' ) $header_font = '';
    }

    if ( isset( $_COOKIE['header_font_color'] ) && get_option('show_control_panel') == 'on' )   
        $header_font_color =  $_COOKIE['header_font_color'];
    else 
        $header_font_color = get_option('header_font_color');

    if ( $header_font <> '' || $header_font_color <> '' ) {
        $header_font_id = strtolower( str_replace( '+', '_', $header_font ) );

        if ( $header_font <> '' ) { 
            $font_style .= "<link id='" . $header_font_id . "' href='http://fonts.googleapis.com/css?family=" . $header_font . "' rel='stylesheet' type='text/css' />";
            $font_family = "font-family: '" . str_replace( '+', ' ', $header_font ) . "', Arial, sans-serif !important; ";
        }

        if ( $header_font_color <> '' ) {
            $font_color_string = "color: #" . $header_font_color . " !important; ";
        }

        $font_style .= "<style type='text/css'>h1,h2,h3,h4,h5,h6 { ". $font_family .  " }</style>";
        $font_style .= "<style type='text/css'>h1,h2,h3,h4,h5,h6 { ". $font_color_string .  " }
        #featured h2 a, #footer h4.widgettitle { color: #fff !important; }
        </style>";

        echo $font_style;
    }

    $font_style = '';
    $font_color = '';
    $font_family = '';
    $font_color_string = '';

    if ( isset( $_COOKIE['body_font'] ) && get_option('show_control_panel') == 'on' ) $body_font =  $_COOKIE['body_font'];
    else {
        $body_font = get_option('body_font');
        if ( $body_font == 'Droid+Sans' ) $body_font = '';
    }

    if ( isset( $_COOKIE['body_font_color'] ) && get_option('show_control_panel') == 'on' )     
        $body_font_color =  $_COOKIE['body_font_color'];
    else 
        $body_font_color = get_option('body_font_color');

    if ( $body_font <> '' || $body_font_color <> '' ) {
        $body_font_id = strtolower( str_replace( '+', '_', $body_font ) );

        if ( $body_font <> '' ) { 
            $font_style .= "<link id='" . $body_font_id . "' href='http://fonts.googleapis.com/css?family=" . $body_font . "' rel='stylesheet' type='text/css' />";
            $font_family = "font-family: '" . str_replace( '+', ' ', $body_font ) . "', Arial, sans-serif !important; ";
        }

        if ( $body_font_color <> '' ) {
            $font_color_string = "color: #" . $body_font_color . " !important; ";
        }

        $font_style .= "<style type='text/css'>body, .blurb h3.title, #footer h4.widgettitle, .widget h4.title { ". $font_family .  " !important }</style>";
        $font_style .= "<style type='text/css'>body { ". $font_color_string .  " }</style>";

        echo $font_style;
    }} ?>

Answer 1

So if i understand correctly you want to let the authors style their profile and save the data in a way that every visitor will see their saved style, kind of like twitter lets you style your own author page. If so then using cookies won't help you here since cookies are user specific and not saved on your server or in the database do you won't be able to generate the style the author has picked anywhere but on that authors browser.

What you should do is save all of the style data as an array in the usermeta table using add_user_meta() or update_user_meta() and then on your author page call that array of data using get_user_meta and generate the style the user has picked for his author page.