Setting up featured images in WordPress isn’t rocket science—I mean it is a built-in solution after all—but it is nice finding all the information you need in one place to get your WordPress theme setup to do what you need. Here, I will walk you through the basic and extended code snippets for featured images, as well as providing you additional information on the topic that may help out.
Adding Theme Support
If your WordPress theme doesn’t already have featured images set, activating them is fortunately very easy. Just add the following code to your functions.php file in your theme to get the ball rolling.
add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 274, 200, true ); // Default size
You can set the default image size to whatever you’d like by utilizing the set_post_thumbnail_size( ) function. The values in order of appearance are: width, height, crop. Setting crop to “true” tells WordPress that if an image is larger than the set size, to crop it down from the center outward to fit that size. Likewise, you can set it to “false” or not even include the parameter to get the WordPress default—resize the image to fit the set width and allow the height to be based on the respective image.
Showing “Featured Image” in the Post Editor
After ensuring that featured images are set in your theme’s functions.php file, you will now have the option in the post editor screen to show the “Featured Image” box, where you will be able to set the actual image on a per post basis. To do this, look near the top right of the post editor screen for “Screen Options”. When clicked you will see checkbox options for all the available post parameter fields. One of those will be “Featured Image”; check the box to show the field in your editor and minimize the “Screen Options” once again, as they won’t be needed again.
Everyone’s editor layout is different, so the “Featured Image” box may show up near the bottom of the screen or most likely in the right sidebar on the screen. You can hover the header of the box (you will get a grid icon with arrows going in all directions) and click and hold to drag the box to where you’d like it to be placed in your editor.
Setting Additional Sizes
Setting additional sizes for featured images is quite easy as well, and all it takes is a line of code in your theme’s functions.php for WordPress to automatically generate images in these sizes for any incoming media. This uses the add_image_size( ) function in the same format as the set_post_thumbnail_size( ) above.
add_image_size( 'another-image-size', 370, 180, true ); // Another image size
When adding new image sizes to functions.php, keep in mind that any media that was uploaded prior to this addition will not have this size option available immediately. There are a variety of plugins you can use to regenerate images into the additional sizes you need; my favorites are: Regenerate Thumbnails and Force Regenerate Thumbnails.
You can add as many additional sizes as necessary for your theme.
Using your Featured Image
After all your setup work is complete for post thumbnails, you can now actually begin using them in your theme! Just put the following code into your theme to pull the default thumbnail size.
<?php the_post_thumbnail(); ?>
You can of course pull in any of the other additional sizes you set as well by adding the parameter to the the_post_thumbnail( ) function. You will simply add the custom name you’ve given the additional size to your code:
<?php the_post_thumbnail( 'another-image-size' ); ?>
Getting a Featured Image’s URL
It’s sometimes the case when not only do you need to pull in your featured image into your article, but perhaps may need something a bit more flexible—like the image’s actual URL. By default when you use the_post_thumbnail( ), it outputs an image field with all the associated classes and sizing it needs, which leaves no options for more custom use cases.
<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
<div style="background-image: url('<?php echo $image[0]; ?>');"> ... </div>
<?php endif; ?>
<?php
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src( $image_id, 'large', true );
echo $image_url[0];
?>
Check if Featured Image Exists/Output Default Image
When utilizing Featured Images in your site, you may want to always want to display something in place of a featured image, even if you don’t have one. The following code checks if a featured image exists and outputs it. If there isn’t one specified, you can then set what default image you’d like to display instead.
<?php if( has_post_thumbnail() ): ?>
<div class="entry-thumbnail">
<?php the_post_thumbnail( 'medium' ); ?>
</div>
<?php else: ?>
<div class="entry-thumbnail">
<img src="/assets/dummy-image.jpg" alt="Image Unavailable" />
</div>
<?php endif; ?>
Wrapping Up
I hope this article has been helpful in explaining the entire process and all the options available when using featured images in your themes. WordPress is very much like a puzzle—especially when first becoming acquainted with its behavior and quirks. Luckily it is supported by very devoted enthusiasts everywhere and has countless plugin options to help you accomplish tasks that may have seemed very difficult from the outset.
