WordPress.org

Make WordPress Core

Ticket #12343: header-color.diff

File header-color.diff, 9.6 KB (added by jshreve, 5 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>