How to add images in WordPress

Add caption and image source for WordPress featured images

In this post I introduce the Featured Image Caption plugin, which you can use to add captions for WordPress featured images. Featured image subtitles are a great way to identify the source or creator of the image.

When uploading images, a caption for the image can be entered in the WordPress media library. For images inserted in the WordPress editor, the caption is also displayed as an image caption.

However, featured images do not show any labels because they are displayed by the theme. With the Featured Image Caption plugin, the caption can also be added for featured images.

Featured Image Caption

The plugin can be downloaded for free from the WordPress plugin directory and is compatible with the current WordPress version 4.7.4.

Enter the caption and source

The plugin adds a new metabox called Featured Image Caption for entering subtitles and image source in the admin area.

There is a separate field for the caption Caption text offered by the plugin. Here I would have liked that the existing field could also be used for image captions from the WordPress media library.

Link text and URL can be entered to specify the image source and the link can be opened either in the same or a new window.

Automatic display of the caption

Under Settings → Featured Image Caption you will find the options of the plugin.

The first option activates the automatic display of the caption for featured images, i.e. the plugin automatically inserts the captions after each featured image.

The display of the image captions can be restricted to individual posts with the second option.

Functionality and requirements of the plugin

The plugin uses the filter post_thumbnail_html to attach the caption to the template functions for displaying featured images.

For the plugin to work, the activated theme must therefore use the the_post_thumbnail () or get_the_post_thumbnail () functions. Usually this is the case with most themes.

In addition, the caption is only automatically displayed for featured images that are displayed within the WordPress loop. TwentySeventeen, for example, uses the featured image function for individual posts in the header.php and thus outside of the loop. This is why the automatic display does not work here.

Manual output of the picture subtitles

If your theme does not automatically display the captions under featured images for the reasons just mentioned, these can also be output manually in the theme.

The plugin provides the template function for this cc_featured_image_caption () ready. This can be integrated anywhere in the theme files, preferably of course directly under the functions for displaying the featured images.

An if query with function_exists () ensures that the theme continues to work if the plugin has been deactivated:

As always, we recommend using a child theme to adapt the theme files.

Alternatively, the plugin also provides the shortcode [ccfic] for insertion in the WordPress editor, with which the caption can also be added directly to the post.

Avoid nested links

Most themes link the post image on archive pages and in the blog index directly to the individual view of the post. The code for it looks like this or something like this:

If the caption is to be displayed in the blog and archives, the fields for the image source should not be filled out.

Then the plugin adds the link to the image source, which creates a double link with the existing link in the theme. However, nested links are not allowed in the HTML specification and often lead to layout problems.

If the image source is to be specified with a link, the display of the image caption in the plugin options can also be restricted to individual contributions, which the featured images usually display without a link.

Adjust the caption styling

By default, the caption and image source are in a wrapper div with the class .ccfic, which can also be deactivated in the plugin options.

With the span tags and individual classes, the styling can be easily adapted with a little CSS code.

I use this CSS code here in the blog. The caption is displayed in smaller font and on the right below the image.

You can see the result directly in this post in the post image at the top.

Overview of all articles in this series