Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Customizer Color Control
<?php
add_action( 'wp_enqueue_scripts', 'mytheme_customizer_css', 100 );
/**
* 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 );
}
}
<?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('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
)
)
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.