Header

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 child theme that you have to choose from

The header is named header.php and is pretty fragile when it comes to the PHP code. Your work shouldn’t deal with that at all.

As an example, I’ll use the Shadow child theme. You’ll want to edit the style.css file.

This tutorial covers Options version 1.3+.

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 (Options Version 1.0 - 1.1)

The CSS code

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

/************************************************
	Header
************************************************/
#header-container { height: 75px; width: 100%; }

#header { float: left; width: 600px; height: 70px; text-align: left; }
#header #site-title { float: left; width: 600px; font-weight: bold; }
#header #site-title a {
	margin: 0 0 0 10px;
	width: 345px;
	height: 70px;
	display: block;
	background: url(images/header-dark.gif) no-repeat 0 0;
	}

/* Hides header text */
#header #site-title a span, #header #site-description { 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, #site-title, #site-desc, and #feed.

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

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

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

#header #site-title a span, #header #site-desc 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 /shadow/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: 100px; width: 100%; }

#header { float: left; width: 600px; height: 100px; text-align: left; }
#header #site-title { float: left; width: 600px; font-weight: bold; }
#header #site-title a {
	margin: 0 0 0 10px;
	width: 400px;
	height: 100px;
	display: block;
	background: url(images/header-dark.gif) no-repeat 0 0;
	}

/* Hides header text */
#header #site-title a span, #header #site-description { 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 #site-title {
	float: left;
	width: 600px;
	font-weight: bold;
	}
#header #site-title a {
	margin: 0 0 0 10px;
	}
#header #site-desc {
	clear: left;
	float: left;
	}

Of course, this is just an example.

Choosing to display no header in theme options

Only relevant to early versions of the theme. Does not apply to Version 1.2+.

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">.