Header Tagline Color in the Theme Customizer

govpress

The custom header feature allows the user to set the color of the header text. But what if you’d like for the site title to be a different color than the site tagline? This is an issue I just hit in the GovPress theme I’ve been working on.

To solve it I added an additional option to the theme customizer:

/**
 * Additional theme customizer options
 *
 * @param WP_Customize_Manager $wp_customize Theme Customizer object.
 */
function prefix_customize_register( $wp_customize ) {

	$wp_customize->add_setting( 'prefix[header_taglinecolor]', array(
		'default' => '#222222',
		'type' => 'option'
	) );

	if ( get_theme_mod( 'header_textcolor') !== 'blank' ) {
		$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_tagline_color', array(
			'label' => __( 'Header Tagline Color', 'govpress' ),
			'section' => 'colors',
			'settings' => 'prefix[header_taglinecolor]'
		) ) );
	}

	$wp_customize->get_setting( 'header_taglinecolor' )->transport = 'postMessage';
}
add_action( 'customize_register', 'prefix_customize_register' );

In my inline styles, I output the color option:

/**
 * Output styles in the header
 */
function prefix_inline_styles() {

	$options = get_option( 'prefix', false );

	if ( ! $options ) {
		return;
	}

	$output = '';

	if ( isset( $options['header_taglinecolor'] ) ) {
		$output .= ".site-description { color:" . sanitize_hex_color( $options['header_taglinecolor'] ) . " }\n";
	}

	// Output styles
	if ($output <> '') {
		$output = "<!-- Custom Styling -->\n<style type=\"text/css\">\n" . $output . "</style>\n";
		echo $output;
	}
}

add_action( 'wp_head', 'prefix_inline_styles', 100 );

Escaping the color option output

Kirk Wright and Zach Tollman both mentioned escaping the output of the the color option in the comments below, so I’ve updated the above code snippet to include sanitize_hex_color. However, this function isn’t available when the theme customizer isn’t loaded- so that will also need to be added to your code:

/**
 * Duplicate the sanitize_hex_color function, which is generally
 * only available to the theme customizer.
 */
if ( !function_exists( 'sanitize_hex_color' ) ) {
	function sanitize_hex_color( $color ) {
		if ( '' === $color )
			return '';

		// 3 or 6 hex digits, or the empty string.
		if ( preg_match('|^#([A-Fa-f0-9]{3}){1,2}$|', $color ) )
			return $color;

		return null;
	}
}

Post Message Support

I also have postMessage support so the updated colors appear instantly, but I’ll let you pick through the code if you’d like to update that.

Check out this code (with additional options as well) on GitHub:
https://github.com/govfresh/govpress/blob/master/inc/customizer.php.

About Devin

I'm a WordPress developer based in Austin, Texas. Follow my projects on GitHub, or more general WordPress ramblings as @devinsays on twitter.

5 Responses

  1. Awesome write-up, Devin! I really appreciate your work on encouraging devs to use the customizer more. It can be a little tough to get your feet wet with it at first and I thank you for helping ease the transition for people new to the customizer.

    One suggestion is that when printing the color value into the CSS, you should escape the value. I think that WP_Customize_Color_Control automatically sanitizes the value on input, but it should also be escaped on output. WordPress now has maybe_hash_hex_color() to handle this; however, that function is only available when the customizer is loaded. At The Theme Foundry, we usually just duplicate the function so we can use it wherever we want.

    Excellent work, Devin!

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>