Change WordPress header color using customizer

Question

I have theme customize function in my customizer.php file:

function mytheme_customize_register( $wp_customize ) {
    $wp_customize->get_setting( 'blogname' )->transport         = 'postMessage';
    $wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';
    $wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';
}

But I can't change header_textcolor using theme customizer. How can I use header text color value in my theme?

My header css:

.navbar-default .navbar-nav>.active>a {
    color: #777;
    background-color: transparent;
}

Where are you actually pulling the Customizer-saved text color and outputting it? You need to have a style block in the head of the document and output the Customizer setting there if it exists, so it will override your stylesheets. — WebElaine

ghoul ghoul · Accepted Answer · 2017-11-08T18:44:58

You can use the header_textcolor value by using get_theme_mod( 'header_textcolor' ) and use that value where applicable. For your specific solution, drop the following code somewhere in functions.php:

function my_styles_method() {
$color = get_theme_mod( 'header_textcolor' ); ?>
<style>
    .navbar-default .navbar-nav>.active>a {
        color: <?php echo esc_attr( $color ); ?>;
        background-color: transparent;
    }
</style> 
<?php
}
add_action( 'wp_head', 'my_styles_method' );

Change WordPress header color using customizer

1 Answers