WPCodeKitWordPress code generators
All 49 generators
GeneratorsDesignDefault Theme Headers

Default Theme Headers Generator

The header images you ship with the theme, the custom-header support that makes them selectable, and the header.php markup that puts one on the page.

acme-custom-header.php
Saved just now
Bundled headers
Dunes at dawndunes
Harbour in fogharbour
The workshop benchworkshop
add_theme_support( 'custom-header' )
Support options
flex-width
Let the user keep an image wider or narrower than the declared width, with no crop step.
flex-height
The same for height — the usual choice for a single-column theme.
header-text
Show the site title and tagline over the header, with a colour control in the Customiser.
uploads
Allow the user to upload their own image as well as picking from yours.
video
Accept an MP4 or a YouTube URL as the header. Core hides it below 900px wide.
wp-head-callback
Print the chosen text colour in wp_head, and hide the title when the user turns it off.
<?php
// Generated with WP CodeKit — powered by GrowQuest (https://growquest.io).
// Add to your theme's functions.php.

/**
 * Custom header support and the images bundled with the theme.
 */
function acme_custom_header_setup() {
	add_theme_support(
		'custom-header',
		array(
			'default-image'      => get_template_directory_uri() . '/assets/headers/dunes.jpg',
			'width'              => 1920,
			'height'             => 480,
			'flex-width'         => false,
			'flex-height'        => true,
			'header-text'        => true,
			'default-text-color' => '1c1a15',
			'uploads'            => true,
			'wp-head-callback'   => 'acme_header_style',
		)
	);

	register_default_headers(
		array(
			'dunes'    => array(
				'url'           => '%1$s/assets/headers/dunes.jpg',
				'thumbnail_url' => '%1$s/assets/headers/dunes-thumb.jpg',
				'description'   => __( 'Dunes at dawn', 'acme' ),
			),
			'harbour'  => array(
				'url'           => '%1$s/assets/headers/harbour.jpg',
				'thumbnail_url' => '%1$s/assets/headers/harbour-thumb.jpg',
				'description'   => __( 'Harbour in fog', 'acme' ),
			),
			'workshop' => array(
				'url'           => '%1$s/assets/headers/workshop.jpg',
				'thumbnail_url' => '%1$s/assets/headers/workshop-thumb.jpg',
				'description'   => __( 'The workshop bench', 'acme' ),
			),
		)
	);
}
add_action( 'after_setup_theme', 'acme_custom_header_setup' );

/**
 * Print the header text colour the user chose.
 *
 * Only runs when wp-head-callback is registered above.
 */
function acme_header_style() {
	$text_color = get_header_textcolor();

	// Nothing to print only when the text is shown AND left at the default colour.
	// Bailing on the colour alone would skip the rule that hides the title.
	if ( display_header_text() && get_theme_support( 'custom-header', 'default-text-color' ) === $text_color ) {
		return;
	}

	?>
	<style id="acme-header-style">
	<?php if ( ! display_header_text() ) : ?>
		.site-title,
		.site-description {
			position: absolute;
			clip-path: inset( 50% );
		}
	<?php else : ?>
		.site-title a,
		.site-description {
			color: #<?php echo esc_attr( $text_color ); ?>;
		}
	<?php endif; ?>
	</style>
	<?php
}