Hide header texts (Title & Tagline) in custom-header.php

Question

I am currently trying to enhance my theme development skills and still have a lot to learn in php.

I'm investigating the code of Underscores and Twenty Seventeen themes. I simply do not understand why the following code works and what it does to hide Site Title and Tagline, if the Display Site Title and Tagline checkbox in Customizer is unchecked.

In custom-header.php, after setting up the custom header with a default text color of #000000, themes set up a function for header style:

function underscores_header_style() {
    $header_text_color = get_header_textcolor();

    /*
     * If no custom options for text are set, let's bail.
     * get_header_textcolor() options: Any hex value, 'blank' to hide text. Default: add_theme_support( 'custom-header' ).
     */
    if ( get_theme_support( 'custom-header', 'default-text-color' ) === $header_text_color ) {
        return;
    }

    // If we get this far, we have custom styles. Let's do this.
    ?>
    <style type="text/css">

If I now set the color of Header Text to #000000 in Customizer, in my opinion, the first if clause should become true, the return; should end the function and the whole following styling part for hiding and beyond shouldn't be working.

So far I've checked with var_dump() for get_header_textcolor() and get_theme_support('custom-header', 'default-text-color'). Both the values are 000000.

In contrast to my above considerations: Everything works correctly.

I don't want to just "copy – paste" this issue in my theme, I want to understand it. Where is my thinking error?

Answer 1

First of all, When you uncheck Display Site Title and Tagline in the customizer, it doesn't matter what value you've already put in Header Text Color, the customizer saves it as blank (not empty string, the actual text "blank") after you Save & Publish. You may check this in wp_options table in the database after you Save & Publish or try var_dump() after moving out of the customizer.

Since get_header_textcolor() returns blank and get_theme_support( 'custom-header', 'default-text-color' ) returns 000000, they don't match in the above mentioned if condition, so the hiding works.

Secondly, you get 000000 with var_dump() for both get_header_textcolor() and get_theme_support( 'custom-header', 'default-text-color' ) when you are in the customizer, because customizer doesn't reload the page after saving & it uses JavaScript to show / hide Title & Tagline before saving. If you close the customizer after saving, you'll see that var_dump() will show blank for get_header_textcolor() and 000000 for get_theme_support( 'custom-header', 'default-text-color' ).

This is the line the customizer uses to save the value as blank in the wp-admin/js/customize-controls.js file:

    control.setting.set( to ? last : 'blank' );

Also, in wp-includes/class-wp-customize-manager.php file's _sanitize_header_textcolor function, you'll see that WordPress allows blank to be a valid input for header_textcolor along with any valid color value in hex format:

    if ( 'blank' === $color )
        return 'blank';

So your logic was correct, but you got the value wrong.