One question that crops up in the comments or via email is how you might add an image (such as a logo) to the red header bar of the Ahimsa theme. This is a tricky issue, because how you accomplish this depends on what the function of the image is and how large it is. Perhaps you want the image to be a background image for the header, like is the case for many WordPress themes. Or perhaps the image is a small logo. The changes to be made to the header code vary correspondingly.
The header is implemented as a table (and yes I know, tables for layout are so pre-CSS[2]) consisting of one row with three cells/columns. The first column is the blog title, with a yellow (default skin) border to its right, the second column is the subtitle, and the third is the search box. The relevant code can be accessed using the Admin section of your blog via Appearance -> Editor (WP >= 2.7). Choose the Header (header.php) option in the right Templates section, to edit the template code for the header.
The code for the table (in Ahimsa 2.2) is reproduced below:
<td colspan='2' id='header'>
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td id='title'><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></td>
<td id='description'><?php bloginfo('description'); ?>>/td>
<td id='search' valign='middle'> <?php include (TEMPLATEPATH . "/searchform.php"); ?> </td>
</tr>
</table>
</td>The three elements within the table are the ones mentioned above. To add an image to this header table, you have to first upload the image to your blog. How to do that is beyond the scope of this note. I will assume that you uploaded the image to your-wp-install-root/wp-content/uploads/myimage.png.
Now let us consider some scenarios:
1. The image is a small logo you want placed to the left of the title
This can be achieved quite simply by editing the first table cell above (with id=’title’) and inserting an IMG tag pointing to your image:
<td id='title'>
<img alt='' title='' src="<?php echo get_option('home'); ?>/wp-content/uploads/myimage.png" />
<a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a>
</td>This might result in some wrapping around of the title text that might need to be addressed (a simple if deprecated way to avoid wrapping is to add the NOWRAP attribute to the TD element). Also, you may need to add “align=” attributes to the IMG to get it to align to the top, bottom or middle of your title text.
2. The image is a background that you want to add to the header
In this case your easiest option may be to edit the Stylesheet (style.css) and add a background-image attribute to the CSS specification for the ‘header’ element. See this link for some help.
3. The image is a large image that you want to use to replace the title or both the title and the subtitle
In this case, if you want to only replace the title, then follow the instructions for #1 above, but replace the code that adds the title:
<td id='title'>
<a href="<?php echo get_option('home'); ?>/">
<img border='0' alt='' title='' src="<?php echo get_option('home'); ?>/wp-content/uploads/myimage.png" />
</a>
</td>The above makes the image/logo clickable to return the viewer to the home page. When you do this, you may wish to remove the (yellow) line to the right: to do that, you will have to edit the Stylesheet (style.css) and remove the border-right attribute for the “#header #title” element. Alternatively, you could just remove the “id=’title’” part from the above.
If you want to replace both the title and the description, you can simply remove the next TD element:
<td id='description'><?php bloginfo('description'); ?>>/td>These instructions provide some details on how to add an image to your blog header. In the interest of brevity, and getting some sleep, I have not drilled down into greater detail, assuming that the above will give you enough hints to accomplish finer customisation. You are as always encouraged to contact me if you need further assistance.
