Add caption and image source for WordPress featured images

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

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.

Featured images do not show any labels because they are displayed by the theme. With the Featured Image Caption plug-in, 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 sources in the admin area.

A separate Caption Text field is provided by the plug-in for the caption. Here I would have liked that the existing field could also be used for image captions from the WordPress media library.

To specify the image source, link text and URL can be entered 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, ie the plug-in automatically inserts the captions after each featured image.

The display of the image captions can be restricted to individual contributions 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 .

In order for the plugin to work, the activated theme must therefore use the the_post_thumbnail () or get_the_post_thumbnail () functions. This is usually 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 contributions in the header.php and thus outside the loop. Therefore 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 cc_featured_image_caption () for this purpose. 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 when the plugin has been deactivated:

 <?php // Display Featured Image Caption. if ( function_exists( 'cc_featured_image_caption' ) ) : cc_featured_image_caption(); endif; ?>

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:

 <a href="<?php the_permalink(); ?>" rel="bookmark"> <?php the_post_thumbnail(); ?> </a>

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 image caption and image source are in a wrapper div with the .ccfic class, which can also be deactivated in the plugin options.

 <div class="ccfic"> <span class="ccfic-text">Bildunterschrift</span> <span class="ccfic-source"> <a href="URL" target="_blank">Linktext</a> </span> </div>

With the span tags and individual classes, the styling can be adapted very easily 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.

 .ccfic { float: right; margin: 0; padding: 0.2em 0.6em; font-size: 11px; font-size: 0.6875rem; color: #777; }

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

Overview of all articles in this series