Header Text Color not changing in the customize menu? Don’t worry! I have the solution.

In this post I will tell you how to change header text color in WordPress through the Customize menu…

First of all lets check that you have the right settings for it to take action…
Take an example of a header…

        <div class="bag">
            <div class="chain">
                <div class="six pockets">
                    <span id="blogname"><?php bloginfo('name'); ?></span>
                    <span id="blogtagline"><?php bloginfo('description'); ?></span>
                </div>
            </div>
        </div>

Let displays the Blog name and displays the Blog’s Tagline…
Now we add the following code in the functions.php

<?php add_theme_support( 'custom-header', array(
		'default-image'          => '',
		'random-default'         => false,
		'width'                  => '',
		'height'                 => '',
		'flex-height'            => true,
		'flex-width'             => true,
		'default-text-color'     => '',
		'header-text'            => true,
		'uploads'                => true,
		'wp-head-callback'       => '',
		'admin-head-callback'    => '',
		'admin-preview-callback' => ''
)); ?>

NOTE: Make sure you have ‘header-text’ set to true.

Now when we go to the Customize Option in wordpress, we can see the Color option in the sidebar… But when we make some changes in the color of the header text, the header text color does not change. This is because we have not added any code in our page which can change the color of our text.
So after a long research in the wp-includes/theme.php I found the solution on line number 998 which shows:

/**
* Display text color for custom header.
*
* @since 2.1.0
*/
function header_textcolor() {
	echo get_header_textcolor();
}

So thats it..! The only step we are now left with is to use this method to get the header color which we change in the Customize Option. Lets Do It… Just add the following code in the span with id blogname and blogtagline.

style="color: #<?php header_textcolor(); ?>"

The final code will be something like this in your Header.php

        <div class="bag">
            <div class="chain">
                <div class="six pockets">
                    <span id="blogname" style="color: #<?php header_textcolor(); ?>"><?php bloginfo('name'); ?></span>
                    <span id="blogtagline" style="color: #<?php header_textcolor(); ?>"><?php bloginfo('description'); ?></span>
                </div>
            </div>
        </div>

We have done it ..!

Now whenever you change the color of the header text in the Customize menu in WordPress…
It will work..!!

Happy Coding…!