WordPress Captions Nuisance or Opportunity

One of the first things I noticed about WP 2.6 was the inclusion of captions for photos. I hated them. Well, I didn’t hate them. I hated having to deal with the CSS to get them to work. I also didn’t like the javascript window which opened (very slowly I might add) in order to enter a caption for a photo.

Once I figured out how to use them, and became more patient waiting for the window to open, I’ve discovered I like putting a Caption under photos.

  • It gives me another place to make a point in the post.
  • It gives me a way to add humor to a post by including a thought under the image instead of in the image
  • It adds some nice formatting and styling to posts.

Now I use captions all the time. I still don’t see them being used much on other blogs.

I wanted to tweak the CSS to make them display larger text and I’ve been thinking about changing the border and font colors as well.

At first I thought they were a nuisance now I find them an opportunity to communicate and bring another level of interest to a blog post.

You too can tweak the captions CSS and put your own brand on it, but I would suggest you stay away from pink borders with white text.

Customizing Your Captions

Go to Design, Theme editor and edit your style sheet.   This is assuming you have already included the Captions CSS Code in your theme.

.wp-caption {
border: 1px solid #000000;   (Color of the border)
text-align: center;
background-color: #333333;   (Color of the background around the image)
padding-top: 4px;
margin: 10px;
-moz-border-radius: 4px;   (Making the Corners Round 3 is the default)
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

Further down you will see:

.wp-caption p.wp-caption-text {
font-size: 12px;   (I changed this from 11px to 12 to make the text larger)
line-height: 18px; (Increased the line height to accommodate the larger text)
padding: 0 4px 5px;
margin: 0;
color: #ffffff;   (Added this color statement to change the color of the text to white instead of default black)
}

If you haven’t started using Captions yet. Take them for spin, you might find out you like them.

But please, don’t use pink borders with white text.   Promise me you won’t do this : )

Pink Captions

Comments

  1. Thanks for the step-by-step info. I can see a lot of potential benefits with the caption option, it is just a matter of getting comfortable with the various tools available. Still, I don’t see what is so bad about the pink border with the white lettering. (Just kidding, of course!) How about a yellow border with white lettering? ( :

  2. Dave, I love the Mary Kay border. 😛 Captions are pretty useful. I usually just photoshop the picture instead.

  3. As far as the speed for the javascript, I have been noticing that web applications are getting slower. Its a little odd. Cpu’s keep getting faster so it makes sense for desktop apps to get faster. But with blackberrys and other mobile devices on the rise the average web user’s connection is not getting faster.

  4. Ki,

    I think it is understandable that internet connections are going to get slower. Streaming movies, tv shows, music, all of these take tremendous amounts of bandwidth, way beyond what the internet was initially designed for.

    I’m never excited when I hear things like “You can now watch movies over the internet from Net Flix” All this makes me grind my teeth because I want the bandwidth for useful things like the Lab and Twitter : )

  5. Getting those damn captions to work correctly is something I haven’t mastered. Good post, thanks much.
    Rob

    Rob Saxe ´s last blog post..A Happy Ending

  6. Like you i’ve come to like captions,once the newness wore off. One thing you didn’t mention,the caption serves as the alt text, so be sure it is keyword rich… it is easier to rank in Google images than Google proper, and because I use alot of pics, it is always one of my top sources.
    .-= Terry@Charlotte Real Estate´s last blog ..gateway-plaza =-.

  7. Terry,

    I didn’t mention the alt tage as the caption in this post. I have mentioned it in others. BUT, and this is a big BUT, Putting keywords in the alt tag is BLACK HAT SEO and Google is very much considering penalizing for doing it.

    Why? Because the ALT tag is for handicapped users of a site who use a text reader to describe the images because the reader can see the images. The alt tag is to describe the image not be a place to stuff keywords.

    Just a Word to the wise. Google is “The All Seeing Eye”

    Dave