How to Add Captions to Images in WordPress

When uploading an image to your post or media library, you are given an option to add a caption. You simply type in what you want your viewers to read below the image, and then you upload it, and everyone is happy.
But wait! You didn’t add a caption to that one picture, and now you want one. Oh, no! You’ve misspelled “The” in another caption and must fix it. Oh bother! One of your captions is no longer a trendy meme, and now you must remove it. But alas, you only know how to read tutorials instead of exploring the many ways of adding, changing, and removing captions on your own. Well, there’s good news: You’re here just in time, as I was just about to explain all of those things.

There are two approaches I will discuss; Editing From your Media Library and Editing Within A Post.

From your Media Library
(Skip to: “Within A Post”)

From your media library, we will start by uploading the image you wish to add a caption to. (I know how to do this part!)

Adding new media in media library.

Choose the image you wish to use image from your computer, and return to your media library.

Code of a image being edited.

Great! Your image has been uploaded, and it now shows up in your Media Library. Now let’s get to the good stuff we came here for.

Okay, smartypants- Now that we’ve made sure we have an image, we need a caption. When hovering over the image we want, the image gives us revision options:

Image of Spock banjo revision options

By clicking either the image title, or the link titled “Edit”, we will be prompted to make our revisions:

add caption

There you have it! Rip off that band-aid, and update that image. It’s got a new voice, and it’s not afraid to speak its caption!

From Within a Post
(Go to: “From your Media Library”)

Sometimes it’s just easier to go into the post with the image you want to edit. There are, of course, plenty of ways to edit your lame awesome caption while editing the post it lives in. Assuming your image is already embedded in the post, here are the ways to groom that caption:

Using the Visual Editor

visual

While in the Visual Editor, you can plainly see that your picture has been embedded with that horrible monstrosity of a caption you’ve created, or are about to create.

When you click on the image, it lights up to be a dull blue. This is the image screaming at you, “Edit me, fool! I have no caption, where is my voice!?”

Good, while your image yells at you, it is also displaying two metaphorical icons in the upper left-hand corner. If you are good at extrapolating data from metaphors, you will know that one may mean delete and the other may mean edit. You will want to choose the one you think is edit. Go ahead, I’ll hold my breath until you find out if you’ve killed your image or let it live to see a caption in its future.

choose the blue pill

Oh, good! *exhales* – you chose the right pill.

Now, a visual editor will pop up, and give you tons of options to change the properties of your image. Don’t get all mind boggled here, there’s a lot to look at; but if you look really closely, you will see that there is an input option titled “Caption”.

edit caption
Replace “NEW CAPTION GOES HERE” with your caption.

Your search is over, you’ve found out how to add your caption! Only now, you must make sure to update all changes and save and or publish that post, or else you’ll have to read this entire article all over again.

Using the Text Editor

text

Oh, good- you’ve chosen the fun way to do this! With the Text Editor!

This may be a little easier for some people to grasp, or it may be the only answer some people came here for. Maybe they could not trust themselves to do this on their own. It’s alright, I understand! I wouldn’t trust myself any more if I totally ruined a caption, either.
Now, in your text editor, your image should be imbedded by the miracle of a code. You may or may not have the shortcode in there that reads :



<img src="img.png" alt="alt text" width="300" height="74" class="size-medium wp-image-242" />

 YOUR CAPTION GOES HERE

…Well, guess what, genius? That “caption” code? It’s for your caption.

The text that reads immediately before your end shortcode tag is the caption that will show up under your image.

The end! Now you can show all of your friends that you know how to put your blog images into context.


If you are missing that caption code:

There are a few (many more) things you need to do.

Your image will look naked like so:

<img src="img.png" alt="alt text" width="300" height="74" class="size-medium wp-image-242" />

You will then want to add the caption shortcode.
Copy and Paste the code below:



YOUR CAPTION GOES HERE

OR:



[/caption]

Both codes work the same way, only the place in which you enter your caption is slightly different. No matter which you choose the caption will look exactly the same. For these examples, I am choosing to use the former.


This part goes BEFORE your image tag;



 

<img src="img.png" alt="alt text" width="#" height="#" class="size-medium wp-image-#" />

YOUR CAPTION GOES HERE

This part goes AFTER your image tag;



<img src="img.png" alt="alt text" width="#" height="#" class="size-medium wp-image-#" />

 YOUR CAPTION GOES HERE

Replace “YOUR CAPTION GOES HERE” with your own caption.


What you need to do after that is note the “wp-image-#”, found below:

width=”#

Add this number replacing the octotherp (or hashtag for you twitter-folk) in “attachment_#’ in the shortcode I gave you:



<img src="img.png" alt="alt text" width="#" height="74" class="size-medium wp-image-242" />

 YOUR CAPTION GOES HERE


Next you will want to note the image width, found in your image tag like so;



<img src="img.png" alt="alt text" width="300" height="74" class="size-medium wp-image-242" />

 YOUR CAPTION GOES HERE

The width of this image is 300. Yours will most likely be a different number.

You will put place that number where the octotherp (or hashtag) between the quotes is following “width=” like so;



<img src="img.png" alt="alt text" width="300" height="74" class="size-medium wp-image-242" />

 YOUR CAPTION GOES HERE

There you have it! You’ve learned how to put in a caption using the text editor! Now go off and give all of your images their own voice!


Top of Page

For more information

Related Articles:

Advertisements

11 thoughts on “How to Add Captions to Images in WordPress”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s