Justin Tadlock

I’d like to give a one-size-fits-all tutorial on how to add a header image here, but it will slightly change between each stylesheet that you choose.

The header is named header.php and is ran by a filed called /app/header.php.

As an example, I’ll use the Dark stylesheet, which will be located in your /styles/dark folder. The file name is dark.css. This stylesheet already comes with a header preloaded into the theme.

1. The CSS code
2. The CSS code explained
3. Adding a header background image
4. Using no header background image
5. Creating your own header (choosing to display no header in theme options)

The CSS code

To edit this, open dark.css and fide this code:

/************************************************
	Header
************************************************/
#header-container { height: 75px; width: 100%; }
#header {
	float: left;
	width: 600px;
	height: 70px;
	text-align: left;
	}
#header h1 {
	float: left;
	width: 600px;
	font-weight: bold;
	}
#header h1 a {
	margin: 0 0 0 10px;
	/* Comment out or delete the next 4 lines to delete header image */
	width: 345px;
	height: 70px;
	display: block;
	background: url(images/header-dark.gif) no-repeat 0 0;
	}
/* Comment out or delete this style rule if not using header image */
#header h1 a span, #header h2 { display: none; }

What the code means

#header-container is a <div> that wraps around your entire header and spans the length of the content area. It wraps around #header, h1, h2, and #feed.

#header wraps around your h1 and h2. The feed <div> floats to the right side of this within #header-container

#header h1 wraps the link to your blog’s title, which is set in your WordPress dashboard options.

#header h1 a is a link to your blog’s URL. This is what needs to have a background image.

#header h1 a span, #header h2 is set to display: none, which means that neither your blog’s title or descriptions will show by default. An image does instead (image is linked to your blog’s URL).

Adding a background image

The default width and height for the image packaged with the theme is 345 x 70 px. If you want to use the same size image, just name the image header-dark.gif and upload it to the /styles/dark/images folder.

If your image is a different size, you’ll need to change a few things. In our example, I’ll show you how to upload an image that is 400 x 100px. Compare these changed values to the default code:

/************************************************
	Header
************************************************/
#header-container { height: 75px; width: 100%; }
#header {
	float: left;
	width: 600px;
	height: 100px;
	text-align: left;
	}
#header h1 {
	float: left;
	width: 600px;
	font-weight: bold;
	}
#header h1 a {
	margin: 0 0 0 10px;
	/* Comment out or delete the next 4 lines to delete header image */
	width: 400px;
	height: 100px;
	display: block;
	background: url(images/header-dark.gif) no-repeat 0 0;
	}
/* Comment out or delete this style rule if not using header image */
#header h1 a span, #header h2 { display: none; }

You may also need to scroll down in your stylesheet to change the padding of #feed to push it down a bit.

With this example, you’ll need to change the value to padding: 78px 0 0 0;.

Showing no header image

If you want to just display your blog’s title and description without the use of a header image. Change the original code to this:

/************************************************
	Header
************************************************/
#header-container { height: 75px; width: 100%; }
#header {
	float: left;
	width: 600px;
	height: 70px;
	text-align: left;
	}
#header h1 {
	float: left;
	width: 600px;
	font-weight: bold;
	}
#header h1 a {
	margin: 0 0 0 10px;
	}

Choosing to display no header in theme options

By default, the header and navigation area are pieced together with the file /app/header.php. This may annoy some users because they might want to tinker with the XHTML a bit. To remedy this, I added an option to display no header. If you choose this option, you’ll have to build your own from scratch.

Add your new code to the header.php file below <div id="body-container"> but above <div id="container">.