Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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;
    }} ?>
share|improve this question
    
are you trying to let the author change his page for himself or for everyone (visitors) who sees that page? –  Bainternet Aug 9 '11 at 17:01
    
For everyone, sorry if I wasn't clear. –  Andrew Aug 9 '11 at 18:15

1 Answer 1

up vote 1 down vote accepted

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.

share|improve this answer
    
Yeah, Twitter-esque profile customization is what I'm looking for. I'll dig deeper with the user_meta as you suggested, because it seems the most reasonable way. I'll be back with my results. –  Andrew Aug 10 '11 at 8:36
    
@Andrew, well good luck and let me know if you need any help with that. –  Bainternet Aug 10 '11 at 13:04
    
Just came back to mark your answer as correct. It indeed seems to be the best solution and I'm currently working on it. Thank you. –  Andrew Aug 17 '11 at 10:54

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.