Replacing the default site header image with a logo

One of the questions that crops up again and again on the WordPress Themes and Templates forum is how to add a custom logo to a theme’s header.

Before I go any further I would just like to remind you that the only recommended way to modify a theme is to use a Child Theme. This is especially important if you use a default theme like twentyeleven or twentyten, because if you modify them directly, your changes can be overwritten by updates.

The next thing to say is that there is no general answer to the problem that will apply out-of-the-box to all themes. I’ll try to make my observations below as general as possible, but the only themes to which you might be able to apply them directly would be the WordPress default themes, or better, child themes based on them. However, lots of themes, wisely, follow the conventions used in the default themes. So my comments will apply, broadly, to those themes as well.

Many people who post to the forum want to remove the site title and description and replace it with the logo. I don’t actually think that’s a good idea, for SEO reasons. However if you really do want to do that, you need to use Firebug or similar to determine the block element that contains them, and set its display property to ‘none’. For twentyeleven, for example, you have:

h1#site-title, h2#site-description { display: none; }

For other themes things may be different.

The CSS above gets rid of the block’s display, but leaves the text in the HTML, which is good for SEO.

So let’s now talk about putting your logo in there. You have some choices. If your theme has a header image included, you can use the Dashboard facilities to substitute one of your own, usually. There may be size requirements, in which case you may have to use image manipulation software such as the GIMP to modify your logo so that it is the correct size. You can also modify, in many cases, the size required by your theme, to give yourself a bit of leeway.

For example, for this site I replaced the normal twentyten header image (in a child theme of course) for the club’s logo.

The first thing that had to be done was to change the header image height to make it less deep than twentyten requires. To do this, I added the following code to functions.php in the child theme:

Of course, the code above is specific to the theme. If your theme sets a fixed header image size, you will need to search for where it’s set and work out how to override it.

The logo was originally just the half on the left hand side. I extended it to full width by sampling the original image’s right hand background (just a pixel or two of width) and then creating a new image of 1000px (i.e. full width) consisting of that background extended the whole way across. Next, I pasted the original logo onto this background and flattened the layers to create a new image. Finally I used the Dashboard to insert the modified image.

For the site title and description, I used CSS to reposition them so that they displayed over the logo’s right hand background, rather than above it.

If you don’t want to, or can’t, use the theme’s header image management facilities you will need to insert your image manually. The easiest scenario is that you can insert it as a background image, in your (child) theme’s style.css file. For example if your theme has a ‘header’ tag you may be able to set its background:

header { background: url('yourimagerelativetothestylesheet'); }

Bear in mind, though, that you may have to ensure that the content of the header tag clears any floats so that the height of the tag is correct. In many themes the header contains only floated content and so has no height, because floats do not contribute to the height of their parent element.

If you can’t do that, you may have to include code for a foreground image in the header’s HTML. This usually means modifying the (child) theme’s header.php file. Again, if there’s a ‘header’ tag, it’s usually sufficient to insert your image immediately inside that tag. Something like: