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.

Portfolio image - no caption

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:

Filling in the Caption

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:

Child Theme Folder

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.

Portfolio image with caption

click!

Everything Looks Like A Face: Email exchange with Elizabeth about the characters and their jobs. One of them, we both feel strongly, is a glazier. It’s always exciting when something really clicks.
Mother Antonia: Worked more on organizing notes. Did not know until starting this project that Percy Grainger knew some of the CSC faculty and gave a concert (concerts?) on campus.

laughing in the archives

Mother Antonia: spent the morning in the CSJ Archives. Somehow I did not expect to laugh frequently in the course of researching this project, but I have been. Today, for instance, there was this dry observation in Mary J. Oates’ “Sisterhoods and Catholic Higher Education” (in Tracy Schier and Cynthia Russett, eds. Catholic Women’s Colleges in America):

For the next half-century, clergy conducting men’s colleges expressed similar ideas, typically warning sisterhoods to avoid a “male curriculum”, particularly courses in science and mathematics. But sisters discounted that advice.

Everything Looks Like A Face: met with Elizabeth and worked on a storyboard.

Erika: watched a video on Khan Academy.

The project diary

As an experiment, over the next six months, I’ll be posting brief daily updates on my current playwriting works-in-progress. I expect this will spur me to make progress in order to have something to report. I’ll also occasionally post programming information I’ve found helpful. Thanks for stopping by!