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:

add_filter('twentyten_header_image_height','jason_header_height');
add_filter('twentyten_header_image_width','jason_header_width');
function jason_header_height($size){ return 100; }
function jason_header_width($size){ return 940; }

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:

<header>
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo.png"
alt="" />

(Assuming you are using a child theme and an image called logo.png in a directory called ‘images’ immediately off your child theme’s directory)

Once the image tag has been included, you can use CSS to position the image where you want it.

And that’s it.  These suggestions don’t by any means cover all the available options.  Hopefully, though, there will be enough here to give you a start.

This entry was posted in Uncategorized. Bookmark the permalink.