Adding a picture caption in WordPress

For a bit of variety…

Spelling out this process step-by-step both to note it down for myself and in case anyone else out there could use this level of detail.

On this blog, I’m using the Twentyfifteen theme. I’ve installed the Jetpack plugin, which includes the template for the Portfolio.

This is how my portfolio projects looked at the start.

I wanted to show the actor’s name and some information about the production. In the WordPress dashboard, I went to Media, clicked on the image, and filled in the Caption field:

Adding the caption is not enough to cause it to display. I had to change the way the WordPress theme was displaying the post. The safe way to make changes to a WordPress theme is to create a child theme for it.

I use FileZilla to manage the files on this site. In FileZilla, I went to the wp-content/themes folder and created a folder for my child theme:

I created two files to put in that folder, functions.php and style.css. These files allow me to change the way the parent theme behaves. Here is functions.php. The “add_action” section at the top is necessary in order to get WordPress to use the styles and scripts in my child theme in preference to those in its parent theme. The highlighted section contains the instructions for formatting the photo and the caption.

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
function twentyfifteen_post_thumbnail() {
if ( post_password_required() || is_attachment() || ! has_post_thumbnail() ) {
		return;
	}

	if ( is_singular() ) :
	?>

	<div class="post-thumbnail">
		<?php the_post_thumbnail(); ?>
		<div class="thumbnail-caption"><?php $caption = get_post(get_post_thumbnail_id())->post_excerpt; echo $caption;?>
		</div>
 		</div><!-- .post-thumbnail -->
	<?php else : ?>
	<a class="post-thumbnail" href="<?php the_permalink(); ?>" aria-hidden="true">
		<?php
			the_post_thumbnail( 'post-thumbnail', array( 'alt' => get_the_title() ) );
		?>
	</a>
	<?php endif; // End is_singular()
}
?>

Here is style.css, where I define how I want the “thumbnail-caption” class to look:

.thumbnail-caption {
	font-size: smaller;
	text-align: center;
	font-style: italic;
	padding-left: 10em;
	padding-right: 10em;
}

I uploaded functions.php and style.css into my child theme folder. Then, back in the WordPress dashboard, I went to Appearance|Themes. My child theme appeared there. I hovered over it and clicked “Activate.” Now the caption appears on the portfolio project page.