Frequently Asked Questions:
How to add a signature image to your bio
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.
So I did everything exactly as you said, and I got nothin’. When the page loads, there’s a little grey box outline that, to me, indicates that there should be an image there, but it doesn’t appear. What did I do wrong?
Kelly Heasley » i checked your code, and you’ve got an extra set of quotes in your code to embed the image. remove the inner curley quotes and you should be fine.
So now I can’t get the signature to move over to the right. Holy cow. What is it about technology that makes it impossible for me to get?
Kelly, I looked at your code again, and it’s an issue of extra, inner, curly quotation marks again, this time on your id=”mysignature” in your bio.php file. Get rid of those quotes and the css should start working.
I checked my code from the example and there was some funkiness about my quote marks, and I fixed that. Sorry if that caused any of the confusion.
Jared! You’re a serious super star. I loooove my blog! Thanks so much for your help making this happen for me.
Jared, I used this method to put in a border image in bio. However there seems to be so much extra space between the border image (bio) and my title for my first post. I cant find the margins I need to mess with to bring up that title post closer to my bio. Does that make any sense?
Shannon, I’m not sure what you’re talking about because I can’t see it on your blog. Did you remove it?
No, it’s there. Right below the text there is a grey line with a large flower image in the center. That is my “signiture” image that I added to the bio. I am just not liking the space between my first post title and the “signiture”.
@Shannon: ok, now i see it. to remove some space there, look in your style sheet for this chunk between line 265 and 310:
.bio { /*floats and adds width and margins to bio text area*/
margin: 40px 40px 40px 40px;
float: left;
display: inline;
}
change the THIRD “40px” to something smaller to decrease that space.
Thanks Jared.
Jared,
I’d like to bump my sig over to the far right (so it lines up with my bio photo). I added the line of coding at bottom of style sheet like you said above, but when I play around with the px sizes of the margins, I get nothing in terms of it moving around on the page.
Thanks!
@Jared: i’m showing that you currently have the margins set to 40px on all sides, and they appear to be working just fine. this is what your stylesheet says:
#mysignature {
margin: 40px 40px 40px 40px;
}
now, if you want it over on the right, try changing it to this:
#mysignature {
margin:0;
float:right;
}
that should do it.
hey I cant find a good free font that looks like a real signature…..any links?
@brooke: i’m not really sure of any good sources to find free fonts. anyone else? sorry!
HI, I have a brand new blog and I am tryng to add a signature. zIt was succesful but I have an icon to left of my signature and i don’t know how to remove it – hmm anyone know how? thank you, Julie http://www.julienorthphotography.com
@Julie North: I don’t see the icon in Firefox3/Mac. Did you get it figured out, or am I just not seeing it?
it’s still there – I don’t know if icon is the right word. It’s like the symbol when there should be a picture but one is missing. I little red square, green circle and blue triangle. I appreciate you looking. It definitly shows up on my screen. Thanks, Julie
@Julie North: oh, i can see it in IE, and figured it out. you’ve got this code pasted in:
<a href=”http://julienorthphotography.com/wp-content/uploads/2008/10/signature.jpg”><img width=”100″ height=”50″ alt=”" src=”http://julienorthphotography.com/wp-content/uploads/2008/10/signature.jpg” title=”signature” class=”alignnone size-full wp-image-16″/></a>
you basically pasted in too much code. change it to this:
<img width=”100″ height=”50″ alt=”" src=”http://julienorthphotography.com/wp-content/uploads/2008/10/signature.jpg” title=”signature” class=”alignnone size-full wp-image-16″/>
except don’t copy/paste my code from this comment, cuz the quotes will be messed up and not work.
Is there any way to do this at the bottom of each post without having to upload the image each time? Deanna Hall has done this (www.deannahallphotography.com/blogg) but I’m not sure if she’s uploading every time or not?
@Stephanie: yeah there is, but i don’t have a tutorial for it. if you know a little bit of html/css you can adapt the instructions from the post about adding a custom post-separator image. or you could (if you know what you’re doing) edit the index.php file and hard-code the signature in the bottom of each post by pasting the embed code into the right spot of the loop.
I know it’s not about the signature image in the bio section but I was wondering if you could tell me how to center my “biopic” with my text?
@Rebekah T.: add a line to your stylesheet (style.css) like this:
#biopic { margin-top:40px !important }
and adjust the number “40″ until it looks right.
Hey Jared… so I inserted that into around line 281 or so like this:
#biopic { /*floats, pads, and borders the biopic*/
margin: 40px 50px 40px 0;
float: right;
border: 1px solid #666666;
#biopic { margin-top:40px !important }
}
But still not changing anything. Did I place it in the right area because it didn’t change even when I changed the px amount.
@Rebekah T.: yeah, you put it sort of inside another rule, which is why it’s not working. remove that line from where it is and put it below that last “}” like so:
#biopic { /*floats, pads, and borders the biopic*/
margin: 40px 50px 40px 0;
float: right;
border: 1px solid #666666;
}
#biopic { margin-top:40px !important }
Jared thanks so much! That totally fixed it.
Now all I need is help with moving my name signature right under the biopic if possible.
Oh and I know it’s not in this category but I am having the hardest time with those as you said it ” SON OF A SUCKERFISH” Topnav tabs. I am trying to figure out how to create my own pull down tabs in which clients can look at my pricing, contact info etc. Any help you can offer would be much appreciated. Thanks again!
@Rebekah T.: it’s pretty easy to create a new dropdown in your nav menu. you can create those pages as “pages” in the WP admin area, then look in the FAQs under “header customizations” for info on how to make your pages appear in a dropdown
Hey Damaris,You got me:)I will thing about it!
Jared,
With the last update being two years old can I resurrect the discussion for how to add a bio signature in Prophoto’s version 3.2?
The bio.php appears to have changed as there is not a and two tags in the php.
Any new suggestions?
Mac Adobe…
[...]» How to add a signature image to your bio Jared’s ProPhoto Tips[...]…