Loading...
Explore with  

How to change header text color in WordPress (in Customize option)

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…!

About the Author

Ishaan Rawat is a Web Designer and Developer living in Jaipur. He loves to code and learn programming. He can be found solving public issues and problems on Experts-Exchange or Wordpress Forums. He is presently a Guru in Experts-Exchange having more than 150,000 points in HTML, CSS. You can find him on , , and .

Comments / Remarks
Ronen Burstein on August 2, 2015 commented: Hi Mr Rawat I wander if you have tutorial about how to add image in to the Twenty fifteen Wordpress theme? I know i need to press the Add New Image batten but when i do nothing happen. Regards Ronen
Add your comment