Skip to content

Commit

Permalink
Add Customizer option to change main site colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@eduardozulian
eduardozulian committed Jul 26, 2014
1 parent eaedbb8 commit a3cf28b
Show file tree
Hide file tree
Showing 3 changed files with 157 additions and 7 deletions.
133 changes: 129 additions & 4 deletions inc/customizer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,13 +64,15 @@ public function tab_uploaded() {
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';

// Branding section
/*
* Branding Section
*/
$wp_customize->add_section( 'ativista_branding', array(
'title' => __( 'Branding', 'ativista' ),
'priority' => 30,
) );

// Branding section: logo uploader
// Logo uploader
$wp_customize->add_setting( 'ativista_logo', array(
'capability' => 'edit_theme_options',
'sanitize_callback' => 'ativista_get_customizer_logo_size'
Expand All @@ -83,13 +85,67 @@ public function tab_uploaded() {
'context' => 'ativista-custom-logo'
) ) );

// Footer section
/*
* Color Section
*/

// Link color
$wp_customize->add_setting( 'ativista_link_color', array(
'default' => '#e7642c',
'transport' => 'postMessage'
) );

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'ativista_link_color', array(
'label' => __( 'Link Color', 'ativista' ),
'section' => 'colors',
'setting' => 'ativista_link_color'
) ) );

// Main color
$wp_customize->add_setting( 'ativista_main_color', array(
'default' => '#ffd01d',
'transport' => 'postMessage'
) );

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'ativista_main_color', array(
'label' => __( 'Main Color', 'ativista' ),
'section' => 'colors',
'setting' => 'ativista_main_color'
) ) );

// Secondary color
$wp_customize->add_setting( 'ativista_secondary_color', array(
'default' => '#008497',
'transport' => 'postMessage'
) );

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'ativista_secondary_color', array(
'label' => __( 'Secondary Color', 'ativista' ),
'section' => 'colors',
'setting' => 'ativista_secondary_color'
) ) );

// Featured front page panel color
$wp_customize->add_setting( 'ativista_front_page_color', array(
'default' => '#e7642c',
'transport' => 'postMessage'
) );

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'ativista_front_page_color', array(
'label' => __( 'Featured Front Page Color', 'ativista' ),
'section' => 'colors',
'setting' => 'ativista_front_page_color'
) ) );

/*
* Footer Section
*/
$wp_customize->add_section( 'ativista_footer', array(
'title' => __( 'Footer', 'ativista' ),
'priority' => 60,
) );

// Footer section: footer text
// Footer text
$wp_customize->add_setting( 'ativista_footer_text', array(
'default' => get_option( 'name' ),
'capability' => 'edit_theme_options',
Expand Down Expand Up @@ -125,6 +181,75 @@ function ativista_get_customizer_logo_size( $value ) {
return $value;
}

/**
* This will output the custom WordPress settings to the live theme's WP head.
*
* Used for inline custom CSS
*
* @since Ativista 1.0
*/
function ativista_customize_css() {
?>
<!-- Customizer options -->
<style type="text/css">
<?php
$link_color = get_theme_mod( 'ativista_link_color' );
if ( ! empty( $link_color ) ) : ?>
.site-content a,
.site-content a:visited,
.site-content a:hover,
.site-content a:active,
.site-content a:focus,
.site-footer a:hover {
color: <?php echo $link_color; ?>
}
<?php endif; ?>

<?php
$main_color = get_theme_mod( 'ativista_main_color' );
if ( ! empty( $main_color ) ) : ?>
.main-navigation a,
.text-box,
.widget,
.site-footer {
background-color: <?php echo $main_color; ?>
}
<?php endif; ?>

<?php
$secondary_color = get_theme_mod( 'ativista_secondary_color' );
if ( ! empty( $secondary_color ) ) : ?>
.main-navigation a,
.widget-title,
.site-footer a,
.entry-title,
.entry-title a {
color: <?php echo $secondary_color; ?> !important;
}

button,
.button,
.content-button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
background-color: <?php echo $secondary_color; ?>
}
<?php endif; ?>

<?php
$front_page_color = get_theme_mod( 'ativista_front_page_color' );
if ( ! empty( $front_page_color ) ) : ?>
.site-lead .entry-content {
background-color: <?php echo $front_page_color; ?>
}
<?php endif; ?>
</style>
<!-- / Customizer options -->
<?php
}
add_action( 'wp_head', 'ativista_customize_css' );

/**
* Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
*/
Expand Down
29 changes: 27 additions & 2 deletions js/customizer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
*/

( function( $ ) {
// Site title and description.
// Site title and description
wp.customize( 'blogname', function( value ) {
value.bind( function( to ) {
$( '.site-title a' ).text( to );
Expand All @@ -16,7 +16,7 @@
$( '.site-description' ).text( to );
} );
} );
// Header text color.
// Header text color
wp.customize( 'header_textcolor', function( value ) {
value.bind( function( to ) {
if ( 'blank' === to ) {
Expand All @@ -33,6 +33,31 @@
}
} );
} );
// Link color
wp.customize( 'ativista_link_color', function( value ) {
value.bind( function( to ) {
$( '.site-content a, .site-content a:hover, .site-content a:visited, .site-footer a:hover' ).css( 'color', to );
} );
} );
// Main color
wp.customize( 'ativista_main_color', function( value ) {
value.bind( function( to ) {
$( '.main-navigation a, .text-box, .widget, .site-footer' ).css( 'background-color', to );
} );
} );
// Secondary color
wp.customize( 'ativista_secondary_color', function( value ) {
value.bind( function( to ) {
$( '.main-navigation a, .widget-title, .site-footer a' ).css( 'color', to );
$( 'button, .button, .content-button, input[type="button"], input[type="reset"], input[type="submit"]' ).css( 'background-color', to );
} );
} );
// Front page panel color
wp.customize( 'ativista_front_page_color', function( value ) {
value.bind( function( to ) {
$( '.site-lead .entry-content' ).css( 'background-color', to );
} );
} );
// Footer text
wp.customize( 'ativista_footer_text', function( value ) {
value.bind( function( to ) {
Expand Down
2 changes: 1 addition & 1 deletion style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
and Blueprint http://www.blueprintcss.org/
Colors:
Default Colors (can be override via Customizer):
Blue: #008497
Orange: #e7642c
Gray: #efefe4
Expand Down

0 comments on commit a3cf28b

Please sign in to comment.