Kelly emailed me today asking how to add a signature image to her bio text area. I thought it was a good question, and something a few of you might like to know how to do, so I’m writing up the answer here.

I think the look Kelly is going for is something like what I did with Paige Elizabeth’s blog, shown here.

See the cute little signature below her bio? Pretty cool, huh?

Well, to pull this off yourself, first, create a signature image. Try to keep the file size fairly small, although the dimensions can be whatever you want. Write down the exact pixel dimensions (width and height) of the image–you’ll need them later.

Next, we’re going to upload the image to your website. Now, you could just use an FTP program or a file manager to upload your image, but for those of you who are a little bit intimidated by such things, here’s how to do it without leaving your comfy WordPress admin area.

To upload your image, just write a new post and save it as a draft. In that new post, upload your signature image and insert it, full-size, into your post, just like you were posting an image in a regular blog entry.

Once the image is inserted into your post, switch your post into “HTML” mode (”Code” in WP 2.3.3 and earlier) by clicking on the tab at the top of your posting box. You should see a bunch of code that looks like this:

<a href="http://www.myblog.com/wp-content/uploads/2008/05/picture-12333.jpg" title="picture-12333.jpg"><img src="http://www.myblog.com/wp-content/uploads/2008/05/picture-12333.jpg" alt="picture-12333.jpg" /></a>

Click and drag in that code to highlight the text in between the quotation marks right after “src=“, shown here marked in red:

<a href="http://www.myblog.com/wp-content/uploads/2008/05/picture-12333.jpg" title="picture-12333.jpg"><img src="http://www.myblog.com/wp-content/uploads/2008/05/picture-12333.jpg” alt=”picture-12333.jpg” /></a>

That’s the address of your signature image that you just uploaded. (It might look a little different, don’t worry.) Copy that text into WordPad or TextEdit for a few minutes. Save your post as a draft in case you copied wrong and need to come back and grab that code again. Once you’ve got everything working, you can delete the post entirely–I’m 98% certain the image you uploaded won’t be deleted when delete the post.

Ok, we’re getting close.

Next, in your WP Admin area, go to “Design” => “Theme Editor” and choose the file “bio.php” to edit it. Near the bottom of that file, look for the end of the last paragraph of your bio, which is marked by a close paragraph html tag that looks like this: </p>.

After that </p> tag but before the two </div> tags, paste in this line.

<img src="http://www.myblog.com/wp-content/uploads/2008/05/picture-12333.jpg" width="50" height="50" id="mysignature" />

Once you’ve pasted that in, just replace the text after “src=” with the text you copied out of your draft post when you uploaded your signature. Also, change the width and height to the dimensions you wrote down when you created the image. Click “update file” to save your changes. Then just view your blog and refresh your browser to see your work.

If you’re really particular about exactly where the signature is placed relative to your text, you can reference this image from your stylesheet and fiddle with its margins a little bit. To do that, just go to your “Theme Editor” again, and edit “Stylesheet (style.css).” Pull down to the bottom of the document, press return to add a new blank line in and paste in these lines:

#mysignature {
margin: 0px 0px 0px 0px;
}

Then, just change those 0’s to different pixel amounts, and experiment by saving your changes and refreshing your browser to see changes. The four zeros represent, in order: top margin, right margin, bottom margin, left margin

Questions? Instead of emailing for support, leave a comment below so everyone can benefit from any clarification.

This entry was posted on Wednesday, May 7th, 2008 and is filed under Customizing ProPhoto, Frequently Asked Questions, Pimp my Blog. You can leave a response, or trackback from your own site.