How to add an image in the Ahimsa Theme header
July 1st, 2009 by ravi

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:

<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td id="title"><a href="&lt;?php echo get_option('home'); ?&gt;/"></a></td>
<td id="description"></td>
<td id="search" valign="middle"></td>
</tr>
</tbody></table>

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:

<img src="<?php echo get_option('home'); ?>/wp-content/uploads/myimage.png" alt="" />
     <a href="<?php echo get_option('home'); ?>/"></a>

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:

<a href="<?php echo get_option('home'); ?>/">
    <img src="<?php echo get_option('home'); ?>/wp-content/uploads/myimage.png"
        border="0" alt="" />
  </a>

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 subtitle/description, you can simply remove the next TD element:

<td id="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.

29 Responses  
  • Ahren Code » Blog Archive » Fix: broken feed links at the top of the Ahimsa theme writes:

    […] How to add an image in the Ahimsa Theme header […]

  • ???? » Blog Archive » ?Ahimsa ??????? writes:

    […] ???How to add an image in the Ahimsa Theme header […]

  • Erica Grigg writes:

    Header.php doesn’t seem to be able to ‘Save’, so every time I make changes, it’s lost. How can I save the changes to the Header/Stylesheet?

  • tomas writes:

    I’ve tried to add a picture to the header using your instructions (http://ahren.org/code/bit/how-to-add-an-image-in-the-ahimsa-theme-header)

    but I can’t get the picture to display, only a small square with a cross appears
    have I missed anything?

    cheers

  • beth writes:

    wow – thank you – very helpful!

  • Jennifer Starkman writes:

    Would it be possible for you to include similar instructions on how to replace *only* the subtitle with an image? I’d like to use two separate images for the title and subtitle, but don’t know CSS well enough to mess with the code without some help. :-)

    Thanks.

    • ravi writes:

      Jennifer, there are three table cells (HTML td elements): the first is the title, the second is the subtitle/description and the third is the search bar. You can edit header.php in the theme and replace the second table cell with a pointer to the image. Please let me know if you want details with sample HTML and I will post it for you.

      • Jennifer Starkman writes:

        Thanks so much for your quick response. Yes, sample html would be very useful since I’m lousy with code of any sort, lol. Thank you!

        Also, this is slightly off-topic, but is there any way to set it up in the templates (I guess it would be in ‘entry.php’ so that each post has two heading bubbles rather than one (so that, for example, one could be the heading, and the other a subheading)? I know there are subtitle plugins, but then they don’t match the theme. If it’s very complicated, don’t worry about it–I just figured it couldn’t hurt to ask, as I’d like to be able to post author and illustrator information as well as the book title for book reviews.

        • ravi writes:

          Hello Jennifer,

          answering in reverse: for the post subtitle, your best bet may be to use one of the subtitle plugins and then style it to match Ahimsa. If you choose a plugin that allows such styling (it should be simple: they just have to assign a class name to the subtitle HTML element, so we can style using that name), I can help you style it to fit Ahimsa. To implement something like this in Ahimsa would be quite a bit of effort (needing custom fields and so on).

          Regarding replacing the subtitle with an image, you should follow roughly the same instructions as replacing the header. Check for this bit of code around line 205 of Ahimsa 3.0, which defines the header table:


          <td colspan='2' id='header'>

          <table border='0' cellpadding='0' cellspacing='0'>

          Below this is the definition of the three cells (<td>), one each for the title, the description and the search field. In your case you should replace the table cell with id=’description’ with something like an IMG tag that points to the image you want to use. Another option is to use CSS to make the image the background for the description.

  • Jennifer Starkman writes:

    Note: I tried using the SubHeading plugin to make things easier, but still had no idea where to add the code so that the subtitle would appear next to or right underneath the post title; or how to style it so that it matched the title capsule.

    Note: I no longer need sample HTML for the header image–figured that one out myself. :-)

    Thanks.

    • ravi writes:

      Jennifer, if you enable the SubHeading plugin and point me to a post, I can tell you what you need to add to the stylesheet to make it fit in with Ahimsa.

      • Jennifer Starkman writes:

        Thanks for the response, Ravi! I’m still trying to figure out where to insert the code from the SubHeading plugin in the template so that the subtitle appears (I’ve left a note asking the dev) where I want it to. As soon as I’ve got that straightened out I will point you to a post to see if you can help me with the stylesheet. I really appreciate your helping a newb out. :-)

        • ravi writes:

          Jennifer, my guess is that the plugin lets you add a sub-heading by adding a new “custom field” to posts, which you should fill in with the sub-heading of your choice. I would guess that when the plugin takes this custom field value (per post) and displays it in each post, it adds some sort of CSS identifier to it, which we can then use to style to fit Ahimsa.

  • Jennifer Starkman writes:

    I know this isn’t your area necessarily, but perhaps you could help me with the placement? The plugin adds a field in the admin area for posts to insert the subtitle, but the installation says to:

    “Place <?php if (function_exists('the_subheading')) { the_subheading('’, ”); } ?> in your template files where you want it to appear.” Not knowing the firest thi

    Since I don’t know anything about the code, I have NO idea where to place it in the template file to make it appear beside or immediately under the post title. Any suggestions? I’m incredibly grateful for your help.

    • ravi writes:

      Jennifer, you can edit template files via Dashboard -> Appearance -> Editor. Choose entry.php and somewhere in the first 20 or so line you will see a tag named <legend>. You can insert the above plugin code right after the closing tag (</legend>), so that it appears right below the post title.

    • ravi writes:

      As always, please keep in mind that such customisations will be lost if and when you upgrade the theme/template. You will have to remember to manually replicated them.

  • Jennifer Starkman writes:

    Thanks SO much! It worked perfectly (although there is a little more space between the two lines than I would have liked, it is certainly far better than not working at all, lol).

  • Jennifer Starkman writes:

    Whoops–sent too soon. I still need to know what you need me to send you in order to style the subheading. Then I SWEAR I will stop pestering you with questions. :-)

  • Jennifer Starkman writes:

    Here’s the one-and-only post (I’m waiting to straighten out all this style/theme/structure before I start migrating the rest of the content from my current site). The subtitle is where it says “written & illustrated by … etc.”

  • Jennifer Starkman writes:

    Augh! So sorry–included the edit page instead of the post page by mistake. This is the right URL (please delete previous):

    http://noodlenuts.com/wordpress/?cat=3

    • ravi writes:

      Unfortunately it looks like the plugin does not add a clear identifier to the inserted text. It just wraps it in a <p> tag. However, since you added the code they required in entry.php, you can go one step further and wrap it in a div like this:


      < ?php if (function_exists('the_subheading')) { print "<div class='postsubheading capsule'>\n"; the_subheading('’, ”); print "</div>\n"; } ?>

      With this in hand we can style this section as we wish. For instance, we can make it float to the right and have a background colour of red, foreground white, and font size of about 14pt, by adding to custom.css the following:


      . postsubheading
      {
      float: left:
      background-color: #bb0000;
      color: #ffffff;
      font-size: 14pt;
      }

  • Jennifer Starkman writes:

    Great! I’m going to try this out tomorrow, and will let you know if I have any problems (though I don’t anticipate any, thanks to your clear explanation). Thanks again for all your help! I’ll be sure to let you know when the site is finished so you can see how the tweaked Ahimsa looks.

  • Jennifer Starkman writes:

    Hmm… Did as suggested, and got the following error:

    Parse error: syntax error, unexpected T_STRING in /home/noodlenu/public_html/wordpress/wp-content/themes/ahimsa/entry.php on line 17

    The area of the altered entry.php code looks like this now:

    <a href="” rel=”bookmark”
    title=”Permanent Link to “>
    <?php if (function_exists('the_subheading'))
    { print "\n”;
    the_subheading(‘’, ”);
    print “\n”;
    }
    ?>

    Any idea what I did wrong?

    • ravi writes:

      Jennifer, looks like your markup (HTML) got interpreted in the comment above. For < you should use &lt;, and for > you can use &gt; so that they are show as those characters rather than get interpreted as HTML tags. I think WordPress might have auto-substituted “smart quotes” in my code where the_subheading() is called. Would it be possible for you to contact me via email? I could send you the text easier that way. We can also try IM (ahrencode @ google chat).

  • Katie Thornberry writes:

    Could you help me figure out what I did wrong:

    <img id='logo' alt='' title='' src='’ />

    <a href="/”>
    <img src="/http://www.blog.gfreemadeeasy.com/wp-content/uploads/2010/07/gfree1.jpg”
    border=”0″ alt=”” />


Leave a Reply

Leave a Reply to Jennifer Starkman Cancel reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

If you need help with one of my software projects, please click: Using that link, you might even find a previous report of (and solution for) the issue!
SIDEBAR
»
S
I
D
E
B
A
R
«
»  Substance: WordPress  »  Style: Ahren Ahimsa