The second shortcode we want to address in this seven-part series is the [ caption ] shortcode. You can use it to apply a large amount of text as a caption for an image. Why would you do this? To make the caption text wrap around the image rather than displaying it underneath.
There is no need to edit the media.php file to instruct WordPress how to use the shortcode. If you do wish to modify it, you will find the file in the wp-includes directory. Somewhere around line #1430, you should see the default code for the shortcode entry.
Setting the Variables
When you create your actual shortcode, there will be several variables to consider. The first three are optional; the fourth is required:
- ID (id) – This variable allows you to add a unique HTML ID to identify your shortcode within your page. There is no ID established by default.
- class – Like the ID tag, this variable allows you to set a custom class for your code. Again, no default is assigned.
- align – This variable does just what it says: it determines the alignment of the text you use for your caption. Your four choices are alignnone, aligncenter, alignright, and alignleft. The default is alignnone.
- width – This variable is not optional. You must determine how wide the caption area should be by entering a value (in pixels) of one or greater. Not setting this variable will cause the shortcode to make your text pass through your image.
Once you have your variables set, you can upload your image to your WordPress media library or locate the URL if you plan to use a remotely hosted image.
Using the Code
Using the [ caption ] shortcode is pretty straightforward. Open your page or post for editing and then click the ‘Text’ tab on the right of the editor. This will take you out of the WYSIWYG environment and into a plain text editor where you should see all of the source code for your document. Wherever you want the image and caption to appear, enter the following code:
[ caption ] <img> Caption [ /caption ]
Notice a couple of things here. First is the image tag. When you use this tag, you have to include the image source with it. If you do not know how to format image source tags correctly, no worries. Use the WYSIWYG to bring in your image from the media library, then return to the text editor and simply add the necessary code on either side.
Second, notice that we are closing the [ caption ] shortcode using ‘/caption’. If you do not close the tag, it will not display properly. Your final code should look something like this:
[ caption id="my_image" align="alignleft" width="200" ]<img src="http://localhost/wp-content/uploads/my_awesome_image.jpg" alt="awesome" title="Look at This" width="350" height="250" class="size-medium my_image" /> Look at This[ /caption ]
Now all you have to do is enter the actual text of your caption by editing the proper field in the media library. That’s it!