Leveraging the core “Display Site Title and Tagline” Customizer option with Site Logo

Update (4/18): While this article is technically accurate, there’s a better way of doing this. Stay tuned for an update.

Tl;dr: Check out the Display Header Text Option Without Custom Headers theme on GitHub for a demonstration on how to use the core “Display Site Title and Tagline” option without Custom Headers.

Introduction

Custom Headers are a theme feature introduced way back in WordPress 2.1. It allowed users to upload a custom header image on themes that supported it.

This feature was later transitioned to the Customizer. With this transition, users would now select their desired header image under an aptly named “Header Image” panel in Customizer.

In addition, users could customize the header text color under the “Colors” panel in Customizer. This would come in handy to allow for better contrast, if header text was overlaid on top of a header image.

Users could even hide the header text completely under the “Site Identity” panel in Customizer. This would come in handy to prevent redundancy, if the header image already contained the site title and tagline.

In a theme that does not declare support for Custom Headers, all these options go away.

Cool story, so what’s the problem?

The “Site Identity” panel with an option to select a logo, but not to hide header text.

Similar to a header image, a logo image could also contain a site title and tagline. The Theme Logo feature was introduced in WordPress 4.5, several years after Custom Headers.

However, adding theme support for Custom Logos alone does not give us an option to hide the header text under “Site Identity” in Customizer.

The only way to get it is by declaring support for Custom Headers. In a theme that wasn’t designed to include a custom header image, this would be a problem.

We’d like to take advantage of this core feature to avoid reinventing the wheel, while also removing options that aren’t going to do anything (like a custom header image selection on a theme not designed to display one).

We’ll walk through how to do exactly that in an Underscores-based theme.

Step 1: Declare Custom Header support

If your theme wasn’t designed with Custom Headers in mind, you probably removed support for them. But we’re going to bring this back.

Simply plop the following (preferably within a theme setup function like this) in your functions.php file:

add_theme_support( 'custom-header' );

Remember where you put this code, because we’ll be revisiting it later.

At this point, we’ll have all the typical options related to Custom Headers in Customizer: header image selection, header text colors, and header text display.

Since our theme has no header image, let’s get rid of the options we don’t need.

Step 2: Remove the Header Image panel in Customizer

Plop the following lines in your Customizer set up function:

$wp_customize->remove_control( 'header_image' );
$wp_customize->remove_control( 'header_textcolor' );

These lines of code will remove the “Header Image” panel along with the header text color option under the “Colors” panel. Two birds, one stone.

At this point, it appears that everything is all set in Customizer. The “Header Image” panel has been nixed, along with the “Header Text Color” option under the “Colors” panel.

However, we’ll notice that while the “Display Site Title and Tagline” option appears to work fine in Customizer, nothing happens after we save.

Step 3: Add code to hide the CSS

To remedy this, we’ll need to add conditional CSS that hides text to mimic what we see in Customizer preview.

First, we’ll plop in the following code in our functions.php file.

You’ll notice this code closely resembles the _s_header_style function in Underscores, minus the custom colors.

The display_header_text() is a core conditional function which checks to see if the “Display Site Title and Tagline” option is checked. If it is, we don’t want any CSS that hides header text output.

Of course, feel free to change the theme_slug_header_style to include your own theme slug.

At this point, we have a callback function that will hide header text if “Display Site Title and Tagline” is unchecked. However, since it’s not referenced anywhere, it won’t do anything…yet.

Step 4: Reference the callback function in our Custom Header support declaration

Remember when I told you to remember where you put your add_theme_support( 'custom-header' ); code?

Because now, we’ll be making a small change to reference the callback function we made in the previous step.

add_theme_support( 'custom-header', array(
	'wp-head-callback' => 'theme_slug_header_style',
) );

If you changed the theme_slug_header_style function name from Step 3, don’t forget to change it here too. They need to match up.

Conclusion

As a finishing touch, we can make a slight adjustment to the customizer.js file included in Underscores because we no longer need the header text color option.

Although we’ll need to keep most of it around for instant CSS changes when we toggle between displaying and hiding header text in Customizer.

For a more cohesive look at the technique outlined in this tutorial, check out the Display Header Text Option Without Custom Headers theme on GitHub.

Also, big thanks to Laurel Fulford, the WordPress.com theme reviewer who brought this to my attention while reviewing the Bari theme. This feature will be coming soon to self-hosted sites through an update, and will be available to WordPress.com users at launch.

Leave a Reply

Your email address will not be published. Required fields are marked *