The issue: Like a lot of themes, my blog theme uses the featured image from each post as a thumbnail. This is great in most cases, but in others I have a featured image that doesn’t shrink well to thumbnail size without looking messy.

The solution: Add a custom field to posts that allows a 2nd image to be added. Then, get this image as the post thumbnail if its there. To avoid a lot of extra edits on old posts, we will fallback on the old behavior if the custom field doesn’t have an image.

Weighing our Options

Although WordPress documentation allows for custom fields without plug-ins, the functionality is basic. It’s not clear that it will handle image data easily. 

Meanwhile, a quick search turns up several recommendations for plug-ins, but one stands out: the Advanced Custom Fields plugin. They have excellent documentation and easily handle image data without any extra fiddling. 

Let’s install this plug-in into our theme and setup our new field. 

Create the Custom Field with the plugin

After installing the plug-in through the Plugins > Add New menu on my WordPress dashboard, I activated it and navigated to the new Custom Fields > Add New menu

I made an image field named ‘blogthumb’ and make sure it’s marked as optional. I will leave the return format as the default for now, because we can access the image URL though this plugin if we need to later. 

After saving the field, navigate to a blog post and hit ‘edit’ to verify the new field is showing. Click the field to select or upload an image.

The image will upload just fine, but WordPress doesn’t know what to do with it yet. We need to tell our theme where and when to show the images from the custom fields. 

Editing the Theme Template

We need to know how the Advanced Custom Fields plugin retrieves the information we give it. We’ll consult their documentation on getting values from fields.

It shows there’s a very simple function that works for our case: get_field().

They even give us a handy example of an if statement to check if the field exists, which is exactly what we need.

$value = get_field( "text_field" );
if( $value ) {
    echo $value;
} else {
    echo 'empty';
}

Now we need to find the .php file which constructs the homepage on our wordpress site so we can edit it to use get_field(). 

If you built the site yourself this may be easy. However, I’m often working on things that I didn’t build from scratch myself. A quick, easy, universal approach to find the file I need to edit is :

1. Inspect the page you want to edit in your browsers dev tools. In this case I want to edit the home page, specifically the thumbnail images for each post. So I will inspect those.

2.  Identify a unique text string I can search for. I’ll try ‘journal-entry’. Now I’ll go to my wordpress files theme files and perform a ‘search all’ operation. I use sublime text to do this by opening the directory in sublime text and pressing Ctrl + Shift + F. Whatever program you use to search through files, use it to search for ‘journal-entry’.

We’ll ignore the files that are CSS related. We know we want PHP files. The last 2 have HTML like our page and look very promising:

/wp-content/themes/journal-blog/template-parts/content-search.php
/wp-content/themes/journal-blog/template-parts/content.php

Lets open the ‘content.php’ and look for the matching section. Right below the string we searched for, we see this:

<?php if( has_post_thumbnail() ){?>
     <img src="<?php the_post_thumbnail_url('journal-featured'); ?>" alt="<?php the_title(); ?>">
<?php } else { ?>
     <img src="<?php echo esc_url(JOURNAL_DIRECTORY_URI); ?>/assets/images/project-2.jpg" alt="<?php the_title(); ?>">
<?php }?>

This is what we need to modify. Before the first if statement, we need a new one to check for the blogthumb image field. If it exists, we will get that field instead. If it doesn’t, we will use the old code.

We’ll use the sample if statement above and use get_field() to store our blogthumb custom field as the variable $image. Then we’ll check if the image exists, and show it if it does. 

Here is the new snippet for displaying post thumbnails on the blog homepage:

<?php
   $image = get_field("blogthumb");
        
   $size = 'thumbnail';
   $thumb = $image['sizes'][ $size ];
   $width = $image['sizes'][ $size . '-width' ];
   $height = $image['sizes'][ $size . '-height' ];

   if( $image ) {
 ?>
        <img src="<?php echo esc_url($thumb); ?>" alt="<?php the_title(); ?>">
<?php } elseif( has_post_thumbnail() ){?>
        <img src="<?php the_post_thumbnail_url('journal-featured'); ?>" alt="<?php the_title(); ?>">
<?php } else { ?>
        <img src="<?php echo esc_url(JOURNAL_DIRECTORY_URI); ?>/assets/images/project-2.jpg" alt="<?php the_title(); ?>">
        <?php }?>

The line <img src=”<?php echo esc_url($thumb); ?>” alt=”<?php the_title(); ?>”> is what actually gets the image and formats it into a HTML image tag. Notice we are using $thumb to specify the size of the image. My theme applies thumbnail sizing to thumbnail images, so we are doing this to keep the thumbnail images consistent. To better understand how to set the size of the image, I used the Advanced Custom Fields documentation on images, which has a very similar example to our final code snippet. 

Remember that the snippet we originally searched for came up in 2 files: content.php and content-search.php. Even though we don’t use the site search currently, we might also want to edit content-search.php to keep things consistent in case we use it later. 

And that’s it! Reload your front page and you should see your new thumbnail. You are free of the tyranny of Featured Images!