neilgee
5/4/2016 - 6:07 AM

Customizer Color Control

Customizer Color Control

<?php


add_action('customize_register','mytheme_customizer_options');
/*
 * Add in our custom Accent Color setting and control to be used in the Customizer in the Colors section
 *
 */
function mytheme_customizer_options( $wp_customize ) {

$wp_customize->add_setting(
      'mytheme_accent_color', //give it an ID
      array(
          'default' => '#333333', // Give it a default
      )
  );
  $wp_customize->add_control(
     new WP_Customize_Color_Control(
         $wp_customize,
         'mytheme_custom_accent_color', //give it an ID
         array(
             'label'      => __( 'Accent Color', 'mythemename' ), //set the label to appear in the Customizer
             'section'    => 'colors', //select the section for it to appear under  
             'settings'   => 'mytheme_accent_color' //pick the setting it applies to
         )
     )
  );

}
<?php

add_action( 'wp_head', 'mytheme_customize_css' );
/*
 * Output our custom Accent Color setting CSS Style
 *
 */
function mytheme_customize_css() {
    ?>
         <style type="text/css">
             .site-header { background-color:<?php echo get_theme_mod( 'mytheme_accent_color', '#333333' ); // add in your add_settings ID and default value ?>; }
         </style>
    <?php
}
<?php

add_action( 'wp_enqueue_scripts', 'mytheme_customizer_css' );
/**
 * Output CSS for background image with wp_add_inline_style
 */
function mytheme_customizer_css() {
	wp_enqueue_style( 'jeniscores-style', get_stylesheet_directory_uri() . '/style.css' ); //Enqueue your main stylesheet
	$handle = 'jeniscores-style';  // Swap in your CSS Stylesheet ID
	//$css = '';
	$accent_color = get_theme_mod( 'mytheme_accent_color' ); // Assigning it to a variable to keep the markup clean.
	$css = ( $accent_color !== '') ? sprintf('
	.site-header{
		background-color : %s;
	}
	', $accent_color ) : '';
	if ( $css ) {
	wp_add_inline_style( $handle  , $css );
	}
}