WordPress.org
Get WordPress

Make WordPress Core

Ticket #12343: header-color.diff

File header-color.diff, 9.6 KB (added by jshreve, 15 years ago)

custom background color picker for headers

  • wp-includes/theme.php

     
    13201320}
    13211321
    13221322/**
     1323 * Retrieve header background color for custom header.
     1324 *
     1325 * @since 3.0
     1326 * @uses HEADER_BGCOLOR
     1327 *
     1328 * @return string
     1329 */
     1330function get_header_bgcolor() {
     1331        return get_theme_mod('header_bgcolor', HEADER_BGCOLOR);
     1332}
     1333
     1334/**
     1335 * Display header image path.
     1336 *
     1337 * @since 3.0
     1338 */
     1339function header_bgcolor() {
     1340        echo get_header_bgcolor();
     1341}
     1342
     1343
     1344/**
    13231345 * Add callbacks for image header display.
    13241346 *
    13251347 * The parameter $header_callback callback will be required to display the
    … …  
    13351357 * @param callback $admin_image_div_callback Output a custom header image div on the custom header administration screen. Optional.
    13361358 */
    13371359function add_custom_image_header($header_callback, $admin_header_callback, $admin_image_div_callback = '') {
    1338         if ( ! empty($header_callback) )
    1339                 add_action('wp_head', $header_callback);
     1360        if (  empty($header_callback) )
     1361                $header_callback = '_custom_header_cb';
     1362               
     1363        add_action('wp_head', $header_callback);
    13401364
    13411365        add_theme_support( 'custom-header' );
    13421366
    … …  
    13481372}
    13491373
    13501374/**
     1375 * Default custom header callback.
     1376 *
     1377 * @since 3.0.0
     1378 * @see add_custom_image_header()
     1379 * @access protected
     1380 */
     1381function _custom_header_cb() {
     1382
     1383        $color = get_header_bgcolor();
     1384        $bg = get_header_image();
     1385       
     1386        if( $bg == 'bgcolor' )
     1387        {
     1388       
     1389        ?>
     1390        <style type="text/css">
     1391        #header-background {
     1392                background-color: #<?=$color?>;
     1393                 width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
     1394                 height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
     1395        }
     1396        </style>
     1397        <?php
     1398        }
     1399}
     1400
     1401/**
    13511402 * Register a selection of default headers to be displayed by the custom header admin UI.
    13521403 *
    13531404 * @since 3.0.0

  • wp-content/themes/twentyten/style.css

     
    342342}
    343343
    344344/* This is the custom header image */
    345 #branding img {
     345#branding img, #branding #header-background {
    346346        clear: both;
    347347        border-top: 4px solid #000;
    348348        display: block;

  • wp-content/themes/twentyten/functions.php

     
    99        // Your Changeable header business starts here
    1010        // No CSS, just IMG call
    1111        define( 'HEADER_TEXTCOLOR', '' );
     12        define( 'HEADER_BGCOLOR', '21759b' );
    1213        define( 'HEADER_IMAGE', '%s/images/headers/forestfloor.jpg' ); // %s is theme dir uri
    1314        define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width',  940 ) );
    1415        define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height',  198 ) );

  • wp-content/themes/twentyten/header.php

     
    4747                                        if ( is_singular() && has_post_thumbnail( $post->ID ) && $width >= HEADER_IMAGE_WIDTH ) :               
    4848                                                // Houston, we have a new header image!
    4949                                                echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
     50                                        elseif ( get_header_image() == "bgcolor" ) : ?>
     51                                       
     52                                        <div id="header-background"> </div>
     53                                       
     54                                        <?php
    5055                                        else : ?>
    5156                                                <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
    5257                                        <?php endif; ?>

  • wp-admin/custom-header.php

     
    132132                        }
    133133                }
    134134
    135                 if ( isset($_POST['resetheader']) ) {
    136                         check_admin_referer('custom-header');
    137                         remove_theme_mods();
    138                 }
    139 
    140135                if ( isset($_POST['default-header']) ) {
    141136                        check_admin_referer('custom-header');
    142137                        $this->process_default_headers();
    143138                        if ( isset($this->default_headers[$_POST['default-header']]) )
    144139                                set_theme_mod('header_image', esc_url($this->default_headers[$_POST['default-header']]['url']));
    145140                }
     141               
     142                if ( isset($_POST['default-header-color']) && $_POST['default-header'] == 'bgcolor' ) {
     143                        check_admin_referer('custom-header');
     144                        $color = preg_replace('/[^0-9a-fA-F]/', '', $_POST['default-header-color']);
     145                        if ( strlen($color) == 6 || strlen($color) == 3 ) {
     146                                set_theme_mod('header_image', 'bgcolor');
     147                                set_theme_mod('header_bgcolor', $color);
     148                        }
     149                }
     150               
    146151        }
    147152
    148153        /**
    … …  
    172177         * @since 3.0.0
    173178         */
    174179        function show_default_header_selector() {
     180       
     181                echo '<div id="bgcolorPickerDiv" style="z-index: 100;background:#eee;border:1px solid #ccc;position:absolute;display:none;"></div>';
     182               
    175183                echo '<table id="available-headers" cellspacing="0" cellpadding="0">';
    176 
     184               
    177185                $headers = array_keys($this->default_headers);
     186                array_unshift( $headers, "bgcolor" );
     187               
    178188                $table = array();
    179189                $rows = ceil(count($headers) / 3);
    180190                for ( $row = 1; $row <= $rows; $row++ ) {
    … …  
    195205                                if ( $col == 3 ) $class[] = 'right';
    196206                                if ( !isset($this->headers[$header_key]))
    197207                                echo '<td class="' . join(' ', $class) . '">';
    198                                 $header_thumbnail = $this->default_headers[$header_key]['thumbnail_url'];
    199                                 $header_url = $this->default_headers[$header_key]['url'];
    200                                 $header_desc = $this->default_headers[$header_key]['description'];
    201                                 echo '<label><input name="default-header" type="radio" value="' . esc_attr($header_key) . '" ' . checked($header_url, get_header_image(), false) . ' />';
    202                                 echo '<img src="' . $header_thumbnail . '" alt="' . esc_attr($header_desc) .'" /></label>';
     208                                                               
     209                                if ( $header_key == "bgcolor" ) {
     210                                        echo '<label><input name="default-header" type="radio" value="bgcolor" ' . checked('bgcolor', get_theme_mod('header_image'), false) . ' />';
     211                                        echo '<input name="default-header-color" id="default-header-color" type="text" style="width: 230px; height: 48px;"  value="'.esc_attr(get_header_bgcolor()).'"/></label>';
     212                                }
     213                               
     214                                else {
     215                                        $header_thumbnail = $this->default_headers[$header_key]['thumbnail_url'];
     216                                        $header_url = $this->default_headers[$header_key]['url'];
     217                                        $header_desc = $this->default_headers[$header_key]['description'];
     218                                        echo '<label><input name="default-header" type="radio" value="' . esc_attr($header_key) . '" ' . checked($header_url, get_header_image(), false) . ' />';
     219                                        echo '<img src="' . $header_thumbnail . '" alt="' . esc_attr($header_desc) .'" /></label>';
     220                                }
     221                               
    203222                                echo  '</td>';
    204223                        }
    205224                        echo '</tr>';
    … …  
    227246         */
    228247        function js_1() { ?>
    229248<script type="text/javascript">
    230         var buttons = ['#name', '#desc', '#pickcolor', '#defaultcolor'];
     249        var buttons = ['#name', '#desc', '#pickcolor', '#defaultcolor', '#default-header-color'];
    231250        var farbtastic;
     251        var selecteditem;
    232252
    233253        function pickColor(color) {
    234                 jQuery('#name').css('color', color);
    235                 jQuery('#desc').css('color', color);
    236                 jQuery('#textcolor').val(color);
    237                 farbtastic.setColor(color);
     254                if( selecteditem == 'textcolor' ) {
     255                        jQuery('#name').css('color', color);
     256                        jQuery('#desc').css('color', color);
     257                        jQuery('#textcolor').val(color);
     258                        farbtastic.setColor(color);
     259                }
     260               
     261                else
     262                {
     263                        jQuery('#default-header-color').val(color);
     264                        jQuery('#default-header-color').css('background-color', color);
     265                        farbtastic.setColor(color);
     266                }               
    238267        }
    239 
     268       
    240269        jQuery(document).ready(function() {
    241270                jQuery('#pickcolor').click(function() {
     271                        selecteditem = 'textcolor';
    242272                        jQuery('#colorPickerDiv').show();
    243273                });
     274               
     275                jQuery('#default-header-color').click(function() {
     276                        selecteditem = 'bgcolor';
     277                        jQuery('#colorPickerDiv').show();
     278                });
    244279
    245280                jQuery('#hidetext').click(function() {
    246281                        toggle_text();
    247282                });
    248283
    249284                farbtastic = jQuery.farbtastic('#colorPickerDiv', function(color) { pickColor(color); });
    250                 pickColor('#<?php echo get_theme_mod('header_textcolor', HEADER_TEXTCOLOR); ?>');
    251 
     285               
     286                selecteditem = 'bgcolor';
     287                pickColor('#<?php echo get_theme_mod('header_bgcolor', HEADER_BGCOLOR); ?>');
     288                selecteditem = 'textcolor';
     289                pickColor('#<?php echo get_theme_mod('header_textcolor', HEADER_TEXTCOLOR); ?>');
     290               
    252291                <?php if ( 'blank' == get_theme_mod('header_textcolor', HEADER_TEXTCOLOR) ) { ?>
    253292                toggle_text();
    254293                <?php } ?>
    … …  
    257296        jQuery(document).mousedown(function(){
    258297                // Make the picker disappear, since we're using it in an independant div
    259298                hide_picker();
     299                hide_bgpicker();
    260300        });
    261301
    262302        function colorDefault() {
    … …  
    276316                        }
    277317                });
    278318        }
     319       
     320        function hide_bgpicker(what) {
     321                var update = false;
     322                jQuery('#bgcolorPickerDiv').each(function(){
     323                        var id = jQuery(this).attr('id');
     324                        if (id == what) {
     325                                return;
     326                        }
     327                        var display = jQuery(this).css('display');
     328                        if (display == 'block') {
     329                                jQuery(this).fadeOut(2);
     330                        }
     331                });
     332        }
    279333
    280334        function toggle_text(force) {
    281335                if (jQuery('#textcolor').val() == 'blank') {
    … …  
    378432if ( $this->admin_image_div_callback ) {
    379433  call_user_func($this->admin_image_div_callback);
    380434} else {
     435if( get_theme_mod('header_image') == "bgcolor" ) {
    381436?>
     437<div id="headimg" style="background-color: #<?=get_theme_mod('header_bgcolor', HEADER_BGCOLOR)?>;">
     438<?php
     439}
     440else {
     441?>
    382442<div id="headimg" style="background-image: url(<?php esc_url(header_image()) ?>);">
     443<?php
     444}
     445?>
     446
    383447<h1><a onclick="return false;" href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>" id="name"><?php bloginfo('name'); ?></a></h1>
    384448<div id="desc"><?php bloginfo('description');?></div>
    385449</div>