WordPress Custom Header

I know i’m a little late on this, but I finally got the chance to play around with the custom header feature which rolled out with WordPress 3.0. It gives users the option to add their own custom image in the header of the site. The question was asked a few times for the last theme I created, so I decided I would enable the feature for the one I am currently working on.

Except for the last bit, all the code you see goes in your functions.php. I’ll try to explain each chunk to my understanding and as best I can.

Define the default

Each line below will sets the default in your admin’s Header panel. HEADER_TEXTCOLOR defines the color of the header text. Here it’s set to white. Next is HEADER_IMAGE, which determines the default image and path to that image. The last two line, HEADER_IMAGE_WIDTH & HEADER_IMAGE_HEIGHT, define the width and height of your image. You decided what fits your theme best.

define('HEADER_TEXTCOLOR', 'FFFFFF');
define('HEADER_IMAGE', '%s/images/default.jpg'); // %s is the template dir uri
define('HEADER_IMAGE_WIDTH', 960); // use width and height appropriate for your theme
define('HEADER_IMAGE_HEIGHT', 260);

Style your site’s header text

To be honest, I don’t normally use header images in my designs. I prefer adding a carefully selected font that matches the style and mood of my design. The function header_style will do just that since this is where we will write out the css for the header text.

// gets included in the site header
function header_style() {
 
    ?><style type="text/css">
        #header  {
	       background: url(<?php header_image(); ?>) 0 0 no-repeat;
	       width:775px;
	       height:200px;
 
        }
	#site-title h1 a {
             font:120px/1em ChopinScriptRegular, "Times New Roman", Times, serif;
        }

Only image. No text.

So far, so good. Right? Next part is the css that removes the header text should we decide we only want an image. For this I’ve created my html with a span inside the anchor which links to the image. This way when we set the “Display Text” in our admin Header panel to “no”, we can move the span holding the title and description off the screen with {text-indent:-99999px;} meanwhile keeping a link to the home url.

 
	<?php if ( 'blank' == get_header_textcolor() ) { ?>
			#site-title h1 a span, #site-description {
			 text-indent:-99999px;
			 display:block;
			}		
 
<?php } ?>
</style>
<?php
}

Your template header

Naturally we want to preview any changes before we save them, so the next piece of code will insert our css into the admin’s preview window. The theme I am currently working on uses Chopin font for the title/header. So I am including the embedded font along with styles of header text.

function admin_header_style() {
    ?>
		<style type="text/css">
			@font-face {
			font-family: 'ChopinScriptRegular';
			src: url('<?php bloginfo('template_directory'); ?>/type/ChopinScript-webfont.eot');
			src: local('☺'), url('<?php bloginfo('template_directory'); ?>/type/ChopinScript-webfont.woff') format('woff'), url('<?php bloginfo('template_directory'); ?>/type/ChopinScript-webfont.ttf') format('truetype'), url('<?php bloginfo('template_directory'); ?>/type/ChopinScript-webfont.svg#webfontBrisyAdb') format('svg');
			font-weight: normal;
			font-style: normal;
}
 
		 #headimg h1 a{
			font:120px ChopinScriptRegular, "Times New Roman", Times, serif;
			margin:0;
			text-decoration:none;
                        width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
                        height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
        }
    </style><?php
}

Admin Panel Preview

And finally one last line of code to add to your functions.php. This is what will make the actual Header menu show up in your admin panel under Appearance.

 add_custom_image_header('header_style', 'admin_header_style');

The result will be the panel with everything we defined above.

In order to understand all of the above a little better, here is the html/php I use in the header.php of the theme.

<div id="header">
       		<div id="site-title">
				<h1><a href="<?php bloginfo('url'); ?>"><span><?php bloginfo('name'); ?></span></a></h1>
           </div>
		<div id="site-description"><?php bloginfo( 'description' ); ?></div>   
      <!-- end #header-->

Voilà!

So there you have it. This is the full code I am using to generate a header menu so user can add their own header images. Please note, I am not a php developer, so I am sure there are ways to make this code look/work/whatever better. I am simply showing you what worked for me. Here’s a link to the full code that I dropped in my functions.php. Be sure to remove the opening and closing php tags before you paste it in your own file. Happy theming.