Last active
December 25, 2015 06:09
-
-
Save mbeall/6930458 to your computer and use it in GitHub Desktop.
Customizer for Flint, with color options: Being postponed
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Theme Customizer enhancements for a better user experience. | |
* | |
* Contains handlers to make Theme Customizer preview reload changes asynchronously. | |
*/ | |
( function( $ ) { | |
// Site title and description. | |
wp.customize( 'blogname', function( value ) { | |
value.bind( function( to ) { | |
$( '.site-title a' ).text( to ); | |
} ); | |
} ); | |
wp.customize( 'blogdescription', function( value ) { | |
value.bind( function( to ) { | |
$( '.site-description' ).text( to ); | |
} ); | |
} ); | |
// Header text color. | |
wp.customize( 'header_textcolor', function( value ) { | |
value.bind( function( to ) { | |
$( '.site-title a, .site-description' ).css( 'color', to ); | |
} ); | |
} ); | |
// Header text color. | |
wp.customize( 'flint_options[accent]', function( value ) { | |
value.bind( function( to ) { | |
$( '.navbar-inverse, #masthead, #colophon' ).css( 'background-color', to ); | |
} ); | |
} ); | |
} )( jQuery ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* Flint Theme Customizer | |
* | |
* @package Flint | |
*/ | |
/** | |
* Add postMessage support for site title and description for the Theme Customizer. | |
* | |
* @param WP_Customize_Manager $wp_customize Theme Customizer object. | |
*/ | |
function flint_customize_register( $wp_customize ) { | |
$wp_customize->add_section('flint_color_scheme', array( | |
'title' => __('Brand Colors', 'themename'), | |
'priority' => 120, | |
)); | |
$wp_customize->add_setting('flint_options[primary]', array( | |
'default' => '#428bca', | |
'sanitize_callback' => 'sanitize_hex_color', | |
'capability' => 'edit_theme_options', | |
'type' => 'option', | |
)); | |
$wp_customize->add_control( new WP_Customize_Color_Control($wp_customize, 'primary', array( | |
'label' => __('Primary', 'flint'), | |
'section' => 'flint_color_scheme', | |
'settings' => 'flint_options[primary]', | |
'priority' => '10', | |
))); | |
$wp_customize->add_setting('flint_options[success]', array( | |
'default' => '#5cb85c', | |
'sanitize_callback' => 'sanitize_hex_color', | |
'capability' => 'edit_theme_options', | |
'type' => 'option', | |
)); | |
$wp_customize->add_control( new WP_Customize_Color_Control($wp_customize, 'success', array( | |
'label' => __('Success', 'flint'), | |
'section' => 'flint_color_scheme', | |
'settings' => 'flint_options[success]', | |
'priority' => '20', | |
))); | |
$wp_customize->add_setting('flint_options[warning]', array( | |
'default' => '#f0ad4e', | |
'sanitize_callback' => 'sanitize_hex_color', | |
'capability' => 'edit_theme_options', | |
'type' => 'option', | |
)); | |
$wp_customize->add_control( new WP_Customize_Color_Control($wp_customize, 'warning', array( | |
'label' => __('Warning', 'flint'), | |
'section' => 'flint_color_scheme', | |
'settings' => 'flint_options[warning]', | |
'priority' => '30', | |
))); | |
$wp_customize->add_setting('flint_options[danger]', array( | |
'default' => '#d9534f', | |
'sanitize_callback' => 'sanitize_hex_color', | |
'capability' => 'edit_theme_options', | |
'type' => 'option', | |
)); | |
$wp_customize->add_control( new WP_Customize_Color_Control($wp_customize, 'danger', array( | |
'label' => __('Danger', 'flint'), | |
'section' => 'flint_color_scheme', | |
'settings' => 'flint_options[danger]', | |
'priority' => '40', | |
))); | |
$wp_customize->add_setting('flint_options[info]', array( | |
'default' => '#5bc0de', | |
'sanitize_callback' => 'sanitize_hex_color', | |
'capability' => 'edit_theme_options', | |
'type' => 'option', | |
)); | |
$wp_customize->add_control( new WP_Customize_Color_Control($wp_customize, 'info', array( | |
'label' => __('Info', 'flint'), | |
'section' => 'flint_color_scheme', | |
'settings' => 'flint_options[info]', | |
'priority' => '50', | |
))); | |
$wp_customize->add_setting('flint_options[accent]', array( | |
'default' => '#222222', | |
'sanitize_callback' => 'sanitize_hex_color', | |
'capability' => 'edit_theme_options', | |
'type' => 'option', | |
'transport' => 'postMessage', | |
)); | |
$wp_customize->add_control( new WP_Customize_Color_Control($wp_customize, 'accent', array( | |
'label' => __('Accent Canvas', 'flint'), | |
'section' => 'flint_color_scheme', | |
'settings' => 'flint_options[accent]', | |
'priority' => '60', | |
))); | |
$wp_customize->add_setting('flint_options[accent-text]', array( | |
'default' => '#ffffff', | |
'sanitize_callback' => 'sanitize_hex_color', | |
'capability' => 'edit_theme_options', | |
'type' => 'option', | |
)); | |
$wp_customize->add_control( new WP_Customize_Color_Control($wp_customize, 'accent-text', array( | |
'label' => __('Accent Text', 'flint'), | |
'section' => 'flint_color_scheme', | |
'settings' => 'flint_options[accent-text]', | |
'priority' => '70', | |
))); | |
$wp_customize->add_setting('flint_options[accent-link]', array( | |
'default' => '#999999', | |
'sanitize_callback' => 'sanitize_hex_color', | |
'capability' => 'edit_theme_options', | |
'type' => 'option', | |
)); | |
$wp_customize->add_control( new WP_Customize_Color_Control($wp_customize, 'accent-link', array( | |
'label' => __('Accent Link', 'flint'), | |
'section' => 'flint_color_scheme', | |
'settings' => 'flint_options[accent-link]', | |
'priority' => '80', | |
))); | |
$wp_customize->get_setting( 'blogname' )->transport = 'postMessage'; | |
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage'; | |
$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage'; | |
} | |
add_action( 'customize_register', 'flint_customize_register' ); | |
/** | |
* Binds JS handlers to make Theme Customizer preview reload changes asynchronously. | |
*/ | |
function flint_customize_preview_js() { | |
wp_enqueue_script( 'flint_customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), '1.1.0', true ); | |
} | |
add_action( 'customize_preview_init', 'flint_customize_preview_js' ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php /* Truncated */ | |
/** | |
* Converts Hex to HSL | |
*/ | |
function HexHSL( $HexColor ) { | |
$HexColor = str_replace( '#', '', $HexColor ); | |
if( strlen( $HexColor ) < 3 ) str_pad( $HexColor, 3 - strlen( $HexColor ), '0' ); | |
$Add = strlen( $HexColor ) == 6 ? 2 : 1; | |
$AA = 0; | |
$AddOn = $Add == 1 ? ( $AA = 16 - 1 ) + 1 : 1; | |
$Red = round( ( hexdec( substr( $HexColor, 0, $Add ) ) * $AddOn + $AA ) / 255, 6 ); | |
$Green = round( ( hexdec( substr( $HexColor, $Add, $Add ) ) * $AddOn + $AA ) / 255, 6 ); | |
$Blue = round( ( hexdec( substr( $HexColor, ( $Add + $Add ) , $Add ) ) * $AddOn + $AA ) / 255, 6 ); | |
$HSLColor = array( 'Hue' => 0, 'Saturation' => 0, 'Luminance' => 0 ); | |
$Minimum = min( $Red, $Green, $Blue ); | |
$Maximum = max( $Red, $Green, $Blue ); | |
$Chroma = $Maximum - $Minimum; | |
$HSLColor['Luminance'] = ( $Minimum + $Maximum ) / 2; | |
if( $Chroma == 0 ) { | |
$HSLColor['Luminance'] = round( $HSLColor['Luminance'], 3 ); | |
return $HSLColor; | |
} | |
$Range = $Chroma * 6; | |
$HSLColor['Saturation'] = $HSLColor['Luminance'] <= 0.5 ? $Chroma / ( $HSLColor['Luminance'] * 2 ) : $Chroma / ( 2 - ( $HSLColor['Luminance'] * 2 ) ); | |
if( $Red <= 0.004 || $Green <= 0.004 || $Blue <= 0.004 ) | |
$HSLColor['Saturation'] = 1; | |
if( $Maximum == $Red ) { $HSLColor['Hue'] = round( ( $Blue > $Green ? 1 - ( abs( $Green - $Blue ) / $Range ) : ( $Green - $Blue ) / $Range ), 3 ); } | |
else if( $Maximum == $Green ) { $HSLColor['Hue'] = round( ( $Red > $Blue ? abs( 1 - ( 4 / 3 ) + ( abs ( $Blue - $Red ) / $Range ) ) : ( 1 / 3 ) + ( $Blue - $Red ) / $Range ), 3 ); } | |
else { $HSLColor['Hue'] = round( ( $Green < $Red ? 1 - 2 / 3 + abs( $Red - $Green ) / $Range : 2 / 3 + ( $Red - $Green ) / $Range ), 3 ); } | |
$HSLColor['Saturation'] = round( $HSLColor['Saturation'], 3 ); | |
$HSLColor['Luminance'] = round( $HSLColor['Luminance'], 3 ); | |
return $HSLColor; | |
} | |
/** | |
* Converts HSL to Hex | |
*/ | |
function HSLHex( $Hue = 0, $Saturation = 0, $Luminance = 0 ) { | |
$HSLColor = array( 'Hue' => $Hue, 'Saturation' => $Saturation, 'Luminance' => $Luminance ); | |
$RGBColor = array( 'Red' => 0, 'Green' => 0, 'Blue' => 0 ); | |
foreach( $HSLColor as $Name => $Value ) { | |
if( is_string( $Value ) && strpos( $Value, '%' ) !== false ) | |
$Value = round( round( (int)str_replace( '%', '', $Value ) / 100, 2 ) * 255, 0 ); | |
else if( is_float( $Value ) ) | |
$Value = round( $Value * 255, 0 ); | |
$Value = (int)$Value * 1; | |
$Value = $Value > 255 ? 255 : ( $Value < 0 ? 0 : $Value ); | |
$ValuePct = round( $Value / 255, 6 ); | |
define( "{$Name}", $ValuePct ); | |
} | |
$RGBColor['Red'] = Luminance; | |
$RGBColor['Green'] = Luminance; | |
$RGBColor['Blue'] = Luminance; | |
$Radial = Luminance <= 0.5 ? Luminance * ( 1.0 + Saturation ) : Luminance + Saturation - ( Luminance * Saturation ); | |
if( $Radial > 0 ) { | |
$Ma = Luminance + ( Luminance - $Radial ); | |
$Sv = round( ( $Radial - $Ma ) / $Radial, 6 ); | |
$Th = Hue * 6; | |
$Wg = floor( $Th ); | |
$Fr = $Th - $Wg; | |
$Vs = $Radial * $Sv * $Fr; | |
$Mb = $Ma + $Vs; | |
$Mc = $Radial - $Vs; | |
if ($Wg == 1) { | |
$RGBColor['Red'] = $Mc; | |
$RGBColor['Green'] = $Radial; | |
$RGBColor['Blue'] = $Ma; | |
} | |
else if( $Wg == 2 ) { | |
$RGBColor['Red'] = $Ma; | |
$RGBColor['Green'] = $Radial; | |
$RGBColor['Blue'] = $Mb; | |
} | |
else if( $Wg == 3 ) { | |
$RGBColor['Red'] = $Ma; | |
$RGBColor['Green'] = $Mc; | |
$RGBColor['Blue'] = $Radial; | |
} | |
else if( $Wg == 4 ) { | |
$RGBColor['Red'] = $Mb; | |
$RGBColor['Green'] = $Ma; | |
$RGBColor['Blue'] = $Radial; | |
} | |
else if( $Wg == 5 ) { | |
$RGBColor['Red'] = $Radial; | |
$RGBColor['Green'] = $Ma; | |
$RGBColor['Blue'] = $Mc; | |
} | |
else { | |
$RGBColor['Red'] = $Radial; | |
$RGBColor['Green'] = $Mb; | |
$RGBColor['Blue'] = $Ma; | |
} | |
} | |
$RGBColor['Red'] = ($C = round( $RGBColor['Red'] * 255, 0 )) < 15 ? '0'.dechex( $C ) : dechex( $C ); | |
$RGBColor['Green'] = ($C = round( $RGBColor['Green'] * 255, 0 )) < 15 ? '0'.dechex( $C ) : dechex( $C ); | |
$RGBColor['Blue'] = ($C = round( $RGBColor['Blue'] * 255, 0 )) < 15 ? '0'.dechex( $C ) : dechex( $C ); | |
return '#' . $RGBColor['Red'].$RGBColor['Green'].$RGBColor['Blue']; | |
} | |
/** | |
* Darkens Hex color by defined percentage | |
*/ | |
function darkenHex( $HexColor, $percent ) { | |
HexHSL($HexColor); | |
$HSLColor['Luminance'] = $HSLColor['Luminance'] - ($percent/100); | |
$HSLColor['Luminance'] = $HSLColor['Luminance'] < 0 ? 0 : $HSLColor['Luminance']; | |
HSLHex($HSLColor['Hue'],$HSLColor['Saturation'],$HSLColor['Luminance']); | |
return '#' . $RGBColor['Red'].$RGBColor['Green'].$RGBColor['Blue']; | |
} | |
/** | |
* Lightens Hex color by defined percentage | |
*/ | |
function lightenHex( $HexColor, $percent ) { | |
HexHSL($HexColor); | |
$HSLColor['Luminance'] = $HSLColor['Luminance'] + ($percent/100); | |
$HSLColor['Luminance'] = $HSLColor['Luminance'] < 0 ? 0 : $HSLColor['Luminance']; | |
HSLHex($HSLColor['Hue'],$HSLColor['Saturation'],$HSLColor['Luminance']); | |
return '#' . $RGBColor['Red'].$RGBColor['Green'].$RGBColor['Blue']; | |
} | |
?> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment