Tips I Realized While Typing This Up: This was written and is being used on WordPress 2.7. It might work on 2.6x, but I didn’t try that. So be aware. Also, this works for me because I don’t use the visual editor when writing up a post. I see straight HTML. If you try this and it’s wonky, let me know and I’ll tinker with it if I have time.
Okay. When I moved to WordPress 2.6 (or whatever iteration of that I moved to at the time), the automatic on captions for images annoyed the crap out of me. For some obvious reasons:
1. Maybe I don’t want captions on all my images. We’re going to use my recent Glengarry Glen Ross DVD review that I ported from the old site to WordPress as an example because that’s where I realized captions could come in handy. But take a look at the top of the review.
That is obviously the cover to the DVD. You do not need a caption telling you that’s what that is. If you do, then you seriously need help. And I don’t mean the how-to sort of help. The sort of help that comes with a car battery and maybe an ice pick.
Anyway. So WordPress by default will either have captions ON or captions OFF. There’s nothing that lets you choose.
2. Do I really want my ALT tag on the image to be the caption text? No, not at all. Check this out:
That caption is for amusement purposes only. That and maybe some Google image SEO mojo, since the text around an image helps that image show up in Google image searches (half the reason to do captions IMO). But honestly, “kicking ass and taking names” is not a good alt tag. My alt tag for that image is “Alec Baldwin in Glengarry Glen Ross.” But WordPress forces you to have the alt tag be the caption. And I dislike being forced to do anything.
So we’re either stuck with deleting the caption code on images where we don’t want it, or no captions. And that sucks. So what to do?
Turn Them Off by Default
You’ll want to add this line of code to your theme’s functions.php file.
add_filter('disable_captions', create_function('$a','return true;'));Now…what does that mean? When I first heard that, I found a functions.php in the wrong place and caused havoc. Look in your theme folder. Is there a functions.php file? Great. Edit it (backing it up first!) and then stick that line in there.
If you don’t have a functions.php file, don’t panic. Create a blank text file called functions.php and put this in it:
Then upload to your theme directory. And if you’re wondering which is yours, then go to Appearance on your WordPress admin panel and see what your current theme is. You should find a directory like that in your wp-content/themes directory on your server. That code I originally found here.
Update Your Style.css
[ad#rightpost]First up, make sure you’ve got this (or some version of this–more on that in a second) in your style.css. If you’re like me and you’ve got a theme that you’ve been using for aeons, it probably doesn’t have this:
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
color:#808080;
}Now, what does all this mean?
.wp-caption p.wp-caption-text {
This is the bit that tells WordPress that what you’re about to stylify goes for captions.
font-size: 11px;
This is the bit that specifies the size of the text. Tweak this to whatever you like. I wanted to go just a skoche smaller than my normal text.
line-height: 17px;
This is the space between lines. Seventeen pixels. Again, tweak it if you feel compelled, but it should be fine that way.
padding: 0 4px 5px;
This is how much padding/space there is around the text. You can have up to four numbers in this, but the way to remember which is which is that it goes clockwise: top, right, bottom, left. So my top is zero pixels, my right is four pixels and my bottom is five pixels. Now–you might notice that we didn’t specify the left. By just specifying the right as four pixels, the left is ALSO four pixels. It’s a shorthand thing, which is the same as having it 0 4px 5px 4px. But CSS coders are inherently lazy, and so, yes, leaving off four characters is a wonderful thing.
Tip: If you are confused about padding, go screw around with this. I have to do it every once in a while myself.
margin: 0;
The margin is supposed to be the padding around an element, not just text. It’s sort of hard to explain. Red Melon’s got an interactive thingy here that explains it better. I don’t have a border around my caption, so I think I’m good as is. But again, tweak as necessary. It’s your friend.
color:#808080;
The color of your caption text. Now my normal text is black, so just like I wanted my caption text to be a trifle smaller, I wanted it to be a shade lighter as well. That’s a dark grey.
}
Your closing bracket. All you need to know is that without this, bad things happen. Now, onto Page 2.