Add a Featured Image to a WordPress Post

October 31, 2017 9:29am

WordPress has come a long way since it’s inception, and post thumbnails, aka Featured Images as they’re now referred to, are one of the better improvements ever made to the service.

Since WordPress 2.9, released on December 18th way back in 2009, this feature has made it easy to assign a post a particular image, which is then often displayed somewhere in your theme.

If this feature is already turned on, you’ll see a box like this when adding or creating a new post:

Click Set Featured Image will bring up the media library and uploader. You can choose from an existing image or upload a new one (just drag and drop an image from your desktop anywhere onto the media library box).

If your theme was built a long time ago, or the folks who built it simply didn’t include the featured image functionality at first, but you’ve got the Set Featured Image functionality now, you can make it easier to find an image that goes with the post using the dropdown box as shown below.

Don’t forget to Update or Publish the post when you’re finished.

Featured Images will display on the front end in a myriad of ways, depending on your theme…or possibly not at all if your theme doesn’t call the <?php the_post_thumbnail() ?> or some other equivalent code.

What if my featured images aren’t showing?

Well, things could get tricky, but if you’re comfortable editing your theme (or child theme), you can open functions.php and add this line somewhere (make sure it’s not already in there) if you don’t have the Featured Image box already.

<?php add_theme_support('post-thumbnails'); ?>

That will create the actual Featured Image box itself, and set you up for the beginning of your eventual success.

Now, in single.php, perhaps index.php, and any other relevant theme files where you want to display the featured images you create, you can place this:

<?php the_post_thumnbnail('thumbnail'); ?>

That will actually display the featured image. How it looks in your theme will be up to fate, chance and whatever was programmed into your CSS. You can also swap out the thumbnail part of that code for medium, large or any other registered image size. If you want to create new image sizes, you can do so in functions.php with this code:

<?php add_image_size( 'my_new_size', 500, 250, true ); ?>

This code says, “Make an image size called my_new_size, where the image is always 500 pixels wide, 250 pixels tall, and the true states that it should always be cropped to exactly those dimensions.”

You could leave the true part off and the image will be cropped to fit within that width and height dimension. When you make the name, just remember not to use special characters other than underscores (including spaces or hyphens).

Then you can use that size in your theme when displaying the post thumbnail via:

<?php the_post_thumnbnail('my_new_size'); ?>

Questions? Fire them off in the comments. 🙂

Up Next: How to Enter Your Social Networks into a Forage Site