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.
I tried the “Featured Image Caption” plug-in on my website. The theme is Uku from Elmastudio. In principle, it's not bad. For me, however, it is not compatible with the plugin: “Related posts for WordPress”. At the end of a single post, this shows me related posts with a title, a small post picture and a short text. The inscription is then also under the small contribution picture. Which doesn't look good at all because it is way too big and spans several lines.
Lg
Helmut
Yes, the plugin will not always work 100% with the automatic display options. This is because the featured images are always displayed in different places by the theme and sometimes do not harmonize with the code of the theme.
Only the manual output of the labeling with the template tags or the adaptation of the display with CSS code helps here.
LG,
Brian
Hi there,
I use the Twenty Fifteen theme and would like the caption to be displayed in small print on the right under the featured image. But I don't know where / in which file this last mentioned css code has to be inserted.
many Greetings
Daniel
Hi Daniel,
The easiest way is to insert the CSS code with the new WordPress core feature for additional CSS. You can find the CSS field under Design> Customizer> Additional CSS.
LG,
Brian
Hi there,
works best with the additional css.
What still needs to be done to display the two text components in different colors?
Kind regards
wolfgang
Hello Wolfgang,
See the HTML code in the post above. Both components have different classes that can be used for styling with different colors.
Many Greetings,
Brian
Thank you for this post. The plugin runs without problems on my side. I've been looking for something like that for a long time. The explanation on your side is also great. thanks
With pleasure! Thank you for the compliment, I'm happy 🙂