How To Add A Caption To Your Photos In Wordpress

Blogging, Wordpress tips Add comments

It’s been at least, oh I don’t know, maybe three people who have asked me how this can be done.

First, I find it best to resize the image to the size you want it before uploading then it’s easier to work with.

Then to add a caption I usually like to add a CSS class and wrap a div around the photo to style it. If that sounds like gibberish then you could just try something like the following code in the HTML part tab of the visual editor:

  1. <p style="font-size:90%; font-style:italic; color:#999999;">test code</p>

After each photo. This makes the text 90% of the standard size, in italics and grey/gray.

If you wanted to do this the CSS way, you would add something like this to your themes style.css

  1. .photocaption {
  2. font-size: 90%;
  3. font-style: italic;
  4. color: #999999;
  5. }

Then in a post would write this:

  1. <div class="photocaption">
  2. <img src="IMAGE URL HERE" />
  3. Caption text here
  4. </div>

The text would then be styled as before. Notice the “hard return” before the caption text i.e. it starts on a new line, otherwise the caption text would start next to the photo and not below it. It is possible to automatically wrap text at a certain width, but let’s not confuse matters.

You could of course also set a background colour, float the image right or left and many other things.

Hope that hasn’t confused you too much!

Related posts you may enjoy:

  • FAQ
  • Great New Video Tool
  • Wordpress 2.6 Is Out

  • Enjoyed this post? Subscribe via RSS

    5 Responses to “How To Add A Caption To Your Photos In Wordpress”

    1. Adrian | Rubiqube Says:

      I used the CSS version, but put the style on a span tag, inside the p with the image. ;)

      By the way… what are you using the display code? Is it a plugin? I use a Google tool, but it’s kind of slow.

    2. Joel Says:

      Thanks Adrian, probably a more elegant way of doing it, but it all works :)

      For the code I use Dean’s Code Highlighter, I previously tried the Google code but this is excellent.

    3. Adrian | Rubiqube Says:

      Awesome! Thanks!

    4. muhammad yaqoob Says:

      I have added the subscribe option provided by your site successfully. now i want to know that how could i check my subscribers list. i want to check whom subsribe to my blog.

    5. Joel Says:

      Thanks Muhammad. If you have AWeber it’s simple to check your list by logging in and looking at your subscriber information in Reports.

    Leave a Reply

    Comments for this post will be closed in 5 days.

    WP Theme & Icons by N.Design Studio
    Entries RSS © 2008 Blog Tech Guy is a service provided by Joel Williams Consulting