How to Modify Featured Images in WordPress

Images are vital components of every physical magazine. Way before they went online, editors took advantage of visual media to entice people into reading stories. Before you start questioning the importance of images, just try to imagine your favorite magazine without ones. Would you be as much interested in reading about technology, cars, food or fashion and makeup if the magazine contained no images?

When first magazines went online, images couldn’t play a significant role in their existence. Internet connections were too slow, and no one could load dozens of pictures per page. Luckily, things have changed, and now we can’t live without online media. The same principle can apply to a personal blog or your business website. In a modern world, you just can’t have a site without pictures. They are way more important than you might even imagine. But among many different images that you can add to Media Library in WordPress, one type stands out.

  1. What is a featured image in WordPress
  2. The Guide to Featured Image Size – How to Change it in WordPress
  3. Automatically set featured image in WordPress
  4. Automatically link featured post thumbnails to their original posts
  5. How to add thumbnail previews in Post/Page edit list
  6. Make your authors select featured images before publishing posts
  7. Change Featured image text in admin pages

1. What is a featured image in WordPress

Although a featured image is just another media file that you can add to WordPress, it deserves special treatment. This kind of picture can help you grab the attention of your visitors. It is used to entice individuals into reading your stories, boost up the visual quality of your blog, and it even plays a notable role in social media sharing. So, don’t neglect the importance of a featured image.

Featured images are controlled by WordPress themes.

Not that long ago, many WordPress themes haven’t had support for them. Just the most careful developers were kind enough to introduce featured images into their themes, while all the others had to code the feature themselves. Luckily, times have changed, and now most of the themes are entirely ready for featured images.

Where do featured images appear on your site?

Usually, a featured image in WordPress will find its place under the spotlights of your homepage. They are used as thumbnails which represent the entire post. More often than not, the same post thumbnail (which is also another name for a featured image) links directly to that post. By selecting a featured image for a post, you can set the entire tone of your story. While a good photo may tempt a visitor into reading the whole post, a bad one can easily repel an average reader.

WordPress featured images on the front page

Also, the same featured images usually appear on top of the single posts, pages and custom post types in WordPress. Depending on the theme that you’re using, a featured image may appear just above or below the title. It may come up in different dimensions; it all depends on a theme developer who worked on the details.

Again, depending on the theme, featured images may be used elsewhere. For example, if you add a widget to show the most recent posts, post thumbnails may be used to add more style to the widget and to get more attention from your visitors.

Some themes will even show the images in the WordPress admin pages, right next to their assigned posts.

How to add a featured image

When we walked you through adding your first post in WordPress, we also mentioned the featured image tab that’s located on the right-hand side of the screen. Just in case you can’t find the tab, you should check your screen options:

  1. Add a new post or edit an existing one
  2. Scroll all the way up
  3. Click on the “Screen Options” tab in top-right corner
  4. Make sure that the “Featured Image” box is checked

WordPress Screen Options post editor

On a fresh WordPress site, the featured image tab will be located at the very bottom of the sidebar on the right side. Check if you have one, and prepare yourself for adding your first post thumbnail:

  1. Click on the “Set featured image” link located in the “Featured Image” box
  2. A new window will open the Media Library
  3. Select any image that you have or upload a new one from the computer
  4. Once you choose the image, click the “Set featured image” button

WordPress featured image

This is it! You can now see the preview of a picture right in the Featured Image box. If you want to see what it looks like in the post, you can quickly scroll up and click on the “Preview” button.

Drag&Drop Featured Image

PRICE: Free

Drag and Drop featured image in WordPress

If you like to drag and drop images to your WordPress Media Library, you should consider adding this free plugin to the list of the active ones on your site. Just by installing Drag&Drop Featured Image plugin, the regular link for adding thumbnail post will change. Instead of clicking the link and then uploading a new image, you will able to drag and drop the picture directly to the spot.

How to remove or replace a post thumbnail

Sometimes, you will want to remove or replace a post thumbnail. Whether you have found or created a better photo, or there was an issue with the first one, it will take just a few clicks to make the change:

  1. Click on the “Remove featured image” link located in the “Featured Image” box below the thumbnail
  2. If you want to set a new image, repeat the steps for adding a new featured image

What if your theme doesn’t have the option?

Although most of the themes today are ready for featured images, there are still some that don’t utilize the feature. To manually add the element, you would need to have some basic understanding of WordPress development. Luckily, you can go around that and forget the code. We will show you some WordPress plugins that will quickly introduce post thumbnails to your theme. With those extensions, you can even let WordPress automatically handle featured images.

Dynamic Featured Image

PRICE: Free

Dynamic Featured Image

The fact that this free plugin counts more than 70,000 active users tells you that there are still quite a lot of themes that need extra care about post thumbnails. Dynamic Featured Image allows you to add multiple images, so you don’t have to depend on only that one that’s usually available. Without touching code, the plugin will prepare selected pictures and allow other theme functions to access them when necessary. You can just relax; there’s nothing you need to do about that.

The plugin is an excellent choice when you’re working with other plugins which need featured images and sliders that will display them to your users. There is even a premium version which adds several different functions.

Quick Featured Images

PRICE: Free

Quick Featured Images

From the very moment you install this plugin, everything can work on the autopilot. Quick Featured Images will let you set a default featured image. So, whenever you forget to set one, the plugin will use the default thumbnail. It can also replace or remove images from any number of selected posts at once.

Additionally, this free plugin adds a picture in a sortable image column in lists of posts, pages, and custom post types. There are also different filters and rules that will let you customize the way your site handles post thumbnails.

In a modern online world, everything consists of media files. Although videos have started to take over the Internet, images are still a vital component that you can’t live without. Whatever site you open, it should have at least a few pictures attached to it. Media files enrich posts and homepages, and you will remind yourself of the importance of media files whenever you stumble upon a site without ones. They make the entire blog look more vibrant and appealing to an average visitor.

The guide to featured image size

Usually, featured images are controlled by the theme. Whether you are going to have one, how many size options will you get and where it is going to appear, depends entirely on your theme developer. Unfortunately, not all developers tend to give featured images enough attention. So, in some cases, you will have to make adjustments to the featured image size. In other cases, you will need an extra dimension set to accommodate a plugin, new widget or some other area of your site that you want to customize.

While registering new image sizes is a piece of cake for a WordPress developer, it can be a nightmare for a non-coder. So, in this part, we are not going to show you code snippets. Instead, we will show you how basic settings work, and how to extend the functionality of featured images through a free WordPress plugin.

Basic image settings

For starters, you should know that WordPress allows you to change a few basic media settings that will affect all new images that you upload to the site. By default, every WordPress installation works with just four image sizes:

  • The original size
  • Thumbnail
  • Medium
  • Large

Basic image settings

Once you upload a new image, WordPress will store the original file without modifications done to it. After the data transfer, the system will take that original file and make all the extra dimensions that you have set up in the Media Settings. It can also add a few extra sizes that are registered by the theme that you are using which might not be visible in the media settings.

To access the Media Settings, please navigate to Settings -> Media

The thumbnail image is somewhat unique. It is squared, and no matter the dimension you have set, WordPress will center on the portion of the picture and crop it to get needed dimensions. Some themes may use this preset as a featured image.

When it comes to medium and large sizes, WordPress works a little bit different. You can specify the maximum width and height, and the system will scale down the image according to those settings, so it doesn’t get cropped. These are usually images that you will use inside posts and pages.

Why is WordPress generating additional sizes?

If WordPress didn’t generate additional image sizes, you would have to create ones manually. The alternative would be having the same image size throughout your site or designers would have to work much harder to set the dimensions of each and every image through the code. This option would also make it much more difficult to customize.

Imagine how much time would you need to open every file in a photo editor, set a custom dimension, and then upload it to WordPress?

Do you know that WordPress themes can use the same image in several different dimensions depending on the location? That would mean generating several image files every time that you’re about to upload a new image! No one would have time for that.

Change featured image size

Obviously, not all WordPress themes use the same featured image size. So, when switching between themes or simply when you want to modify one to your needs and likings, you might want to adjust the featured image size.

Change featured image size in WordPress

Maybe a smaller size will look better an accentuate the title? Maybe you want your featured image to be wider? Luckily, whatever the reason for changing the featured image size, you won’t have to code anything on your own. We are about to show you a fantastic free plugin that will help you.

Check your theme settings

Before installing any additional plugins, you should thoroughly check your theme settings. In the last few years, theme developers have been allowing modifications of many theme features. So, depending on a theme that you have, there is a chance for finding a featured image size option right in the theme settings.

Go to Appearance -> Themes -> Customize and look for the options. Also, some themes will have additional settings that can usually be found in the Appearance menu. If you can find one, you’re in luck because you can change the featured image size in just a few clicks. If not, don’t worry; the following plugin will still be more than simple enough to make the necessary changes.

Simple Image Sizes

PRICE: Free

Simple Image Sizes

When you install Simple Image Sizes, the basic media settings that we just talked about will instantly get expanded. The plugin will recognize all other image sizes from the currently active theme, and it will also allow you to create custom sizes on your own.

Once you have activated the plugin, please navigate to Settings -> Media. Among all additional image sizes, you should find the one that’s dedicated to the featured image. If you are using a standard Twenty Seventeen theme, you should find the “twentyseventeen-featured-image size” option. Here you can easily set a custom width and height for featured images.

Depending on a theme that you’re using, there might be more than just one featured image size. For example, a theme might show featured image on the front page, single posts and some widgets as well. In that case, three sizes would be needed to make the best out of the feature. Depending on how you want to personalize the featured image, change settings accordingly. Don’t forget to hit the update button, save changes and open your site to see what happened to the pictures.

What about the older images?

Usually, when changing image dimensions, WordPress makes changes just to the new ones that you are about to upload. But what about the old ones that you are already using?

Thumbnail Regeneration

Fortunately, the developer of Simple Images Size was kind enough to introduce a feature that will fix this problem. On the same Media Settings page, just scroll down through the list of image dimensions. You will find a Thumbnail Regeneration feature that lets you select which thumbnails you want to rebuild. Since we’re talking only about featured images, select the same thumbnails that you edited earlier (“twentyseventeen-featured-image” size thumbnail for Twenty Seventeen theme).

If you want even more control over thumbnails, scroll a little bit more and select a post type on which you want to rebuild.

Once you’re ready, click if you want to regenerate thumbnails, and don’t forget to save changes.

Downsides of changing image sizes

While setting up the new image dimensions is quite easy with Simple Image Sizes, be careful when modifying your pictures.

If you are working on a smaller site that still doesn’t have that many photos, you can relax and regenerate the thumbnails. But note that there are sites with hundred thousands of images.

Generating a new dimension for each image may take a lot of space on your server. So before confirming the change, be sure that you know what you’re doing.

Also, WordPress doesn’t really take care of your old thumbnails. So, even if you’re not using them anymore, all those images will still sit down in the folder and take up precious hard drive space. Some image cleanup plugins can help you if you’re running a smaller site. But for larger websites with tons of photos, you will need a more professional (and unfortunately more complicated and more expensive) approach.

3. Automatically set featured image in WordPress

Using featured images in WordPress is easy and relatively simple to set up even if your theme doesn’t support the feature from scratch. We have already shown you how to set and display the basic featured image, and you will learn how to check if there is a featured image set and show a notification to the author who forgot to set one.

If you don’t like that option, you can quickly implement a slightly different feature – you can program your WordPress to set a featured image for you automatically.

Unlike the method mentioned above where WP will notify you about missing featured image where you still need to choose one by yourself, this approach will automatically set an image as featured one. To make this work, you will need to have at least one image attached to your post.

After you publish the post without the featured image, the function will take the first picture from that article and set it as the featured image.

What’s great about this is that once the function sets featured image for you, it will stay on even if you decide to delete the picture from the post (the one function used for making the featured image in the first place).

If you don’t have any pictures attached to your post and you hit the publish button, there won’t be any notifications and, of course, there won’t be any images for the function to choose from. So, this is a great option for someone who uses images in most of their posts. But if you tend to forget images more often than not and you don’t attach pictures on a regular basis, we suggest you check the earlier method of preventing publishing posts without the picture.

Now when you know what you can get with this, let’s show you the code. To install the function, you will have to open your functions.php file and copy/paste the following snippet:

function autoset_featured() {
global $post;
$already_has_thumb = has_post_thumbnail($post->ID);
if (!$already_has_thumb)  {
$attached_image = get_children( "post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1" );
if ($attached_image) {
foreach ($attached_image as $attachment_id => $attachment) {
set_post_thumbnail($post->ID, $attachment_id);
}
}
}
}

add_action('the_post', 'autoset_featured');
add_action('save_post', 'autoset_featured');
add_action('draft_to_publish', 'autoset_featured');
add_action('new_to_publish', 'autoset_featured');
add_action('pending_to_publish', 'autoset_featured');
add_action('future_to_publish', 'autoset_featured');

Don’t forget to save changes after pasting the code. Now you can try to add a new post with any image inside it and publish it. Do you see how featured image appeared on the site? Magic.

Modern WordPress themes are pieces of art which are designed with the latest technology in mind. That means that developers have taken care of each and every single thing you and your future website visitors will need from a theme. That includes beautiful design and numerous features added both to backend and frontend.

After WordPress introduced featured post thumbnails, theme developers had to find a way to link those images to their original posts. That simple featured image became a game changer for WordPress which transformed a popular blogging platform into even more popular CMS. Sometimes those photos won’t have to link anywhere, but if you ask us, every featured thumbnail image has to lead to the original post.

Even though many developers find this a must-have feature in a theme, many WordPress themes (most of them will be freebies) won’t have it installed by default. And if you have problems with post thumbnail images not being clickable, like we do, this might get on your nerves. But don’t worry, a quick solution can be found few lines below.

In this part of the tutorial, we’re about to show you how to automatically link featured image to the post permalink and thus allow anyone who clicks on the image to be redirected to the original post.

Link featured image to the post:

  1. Open functions.php
  2. Copy and paste the following code:
  3. function wcs_auto_link_post_thumbnails( $html, $post_id, $post_image_id ) {
    $html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
    return $html;
    }
    add_filter( 'post_thumbnail_html', 'wcs_auto_link_post_thumbnails', 10, 3 );
  4. Save changes

That’s all, folks. After you have saved changes, you won’t have to worry about those featured post thumbnails not linking to the original post. Now both the featured thumbnail image and “read more” text will lead your visitors to your post.

5. How to add thumbnail previews in Post/Page edit list

If you have your everyday WordPress theme with standard features, you have probably got accustomed to a certain look of the WordPress admin panel. When we’re talking about editing options for posts and pages, you probably have a standard view where the title, author, categories, tags, and dates are being shown in different columns.

As you can see, there is no information about featured images. So, if you want to see if a post has a featured image already set and possibly see what the picture looks like, you have to edit each and every post separately.

How to add thumbnail previews in Post/Page edit list

Imagine going through dozens of posts just to take a quick view of the featured image, so you don’t duplicate one or leave a post without one. That’s only a waste of time and that’s why we are going to show you a quick fix for this.

In this part of the tutorial, we are going to show you a simple code you can add to your theme which will then add a thumbnail directly to the post/page column. In order for this “trick” to work, be sure your theme does support post thumbnails.

Enough with the talk; let’s insert the code into the theme and show a thumbnail in your posts editor:

  1. Open your function.php file
  2. Copy and paste the following code:
  3. add_filter('manage_posts_columns', 'posts_columns', 5);
    add_action('manage_posts_custom_column', 'posts_custom_columns', 5, 2);
    
    add_filter('manage_post-type_posts_columns', 'posts_columns', 5);
    add_action('manage_post-type_posts_custom_column', 'posts_custom_columns', 5, 2);
    function posts_columns($defaults){
        $defaults['riv_post_thumbs'] = __('Thumbs');
        return $defaults;
    }
    function posts_custom_columns($column_name, $id){
        if($column_name === 'riv_post_thumbs'){
    		if( has_post_thumbnail() ) {
    	    	echo the_post_thumbnail('medium');
    	 	} else {
    	    	_e('No Thumbnail For Post');
            }
            
    	echo "
    	
    <style> .column-riv_post_thumbs img{ max-height: 300px; max-width: 250px;     } </style>
    "; } }
  4. Save changes
  5. Go to Posts-> All Posts and see the change

In the code above, we have set the thumbnail size to 100×100 pixels. Since this is only used as a featured image preview, there is really no need for a larger picture. Of course, you are free to change the size of the thumbnail to any size you want. In the following lines, you can see few examples of how to edit the last line of the code:

Show full featured image instead of a thumbnail:

echo the_post_thumbnail( 'featured-thumbnail' );

Double the thumbnail size:

echo the_post_thumbnail( array(200,200) );

Our title says you can show thumbnails in posts and pages edit screens. You have tried the code, but you can’t see thumbs in pages? Don’t worry, you will need these two lines of code, and you should add them on the beginning of the snippet shown above:

add_filter('manage_pages_columns', 'posts_columns', 5);
add_action('manage_pages_custom_column', 'posts_custom_columns', 5, 2);

After you add this piece of code, your thumbnails will be visible on pages editor as well.

6. Make your authors select featured images before publishing posts

When WordPress reached version 2.9, people got a chance to add featured images to their posts. Since then, if themes allowed it, you were able to upload or select an image for your post which would nicely represent it, and you still weren’t obligated to show that picture within the post.

WordPress users quickly got accustomed to the new feature, and now it has become hard to find a theme without featured images.

But if you publish a lot and have more than one author, sometimes you can forget to add a featured image which can result in a messy website. Your post without an image would look empty and unfinished on the homepage, there would definitely be a hole made in your recent posts widget, and if you use thumbnails to show the pictures at the beginning of your articles, your posts would look very plain without a picture.

Those are just a few simple problems you might have if you forget to include a featured image.  Before those problems even come up, let’s see how to make it disappear forever.

In this part of the tutorial, we’re about to show you a piece of code which will let you forget about the problem. Once you install the code, every author who tries to publish a post without having a featured image will get an error message. His or her post will then end up being saved as a draft instead of being published. This will make that particular author use any featured image before publishing a post and will be a lifesaver when you’re in a rush.

If you’re ready to make the function work, here are the steps you should follow:

  1. Open your functions.php file
  2. Copy and paste the following code:
  3. add_action('save_post', 'pu_validate_thumbnail');
    
    function pu_validate_thumbnail($post_id)
    {
    // Only validate post type of post
    if(get_post_type($post_id) != 'post')
    return;
    
    // Check post has a thumbnail
    if ( !has_post_thumbnail( $post_id ) ) {
    
    // Confirm validate thumbnail has failed
    set_transient( "pu_validate_thumbnail_failed", "true" );
    
    // Remove this action so we can resave the post as a draft and then reattach the post
    remove_action('save_post', 'pu_validate_thumbnail');
    
    wp_update_post(array('ID' => $post_id, 'post_status' => 'draft'));
    add_action('save_post', 'pu_validate_thumbnail');
    } else {
    
    // If the post has a thumbnail delete the transient
    delete_transient( "pu_validate_thumbnail_failed" );
    
    }
    }
  4. Save changes

This code will check the post status once author clicks on the publish button. It works for posts only, and if the function doesn’t find a thumbnail attached to it, a draft would be saved, and WordPress would be prepared for showing an error message. If a thumbnail is found, a post is normally published without showing the message.

Since the code shown above doesn’t contain the error message itself, you still need a little code snippet which will prepare it:

  1. Right after the previous code, copy and paste this one:
  2. add_action('admin_notices', 'pu_validate_thumbnail_error');
    function pu_validate_thumbnail_error()
    {
    if ( get_transient( "pu_validate_thumbnail_failed" ) == "true" ) {
    echo "<div id='message' class='error'><p><strong>A post thumbnail must be set before saving the post.</strong></p></div>";
    delete_transient( "pu_validate_thumbnail_failed" );
    }
    }
  3. Save changes and try your new function

If you want to personalize the error message, navigate to row #5 and change the “A post thumbnail must be set before saving the post” to anything you like.

That’s it. Enjoy your posts without having to worry about not having a featured image.

7. Change Featured image text in admin pages

If you are editing a theme or creating a new one, you probably need to work things around featured images.

WordPress featured image

If you have used, for example, a function which will automatically add featured image from the first image in a post, it would be nice to let your authors know what’s happening. You could simply change the text and use it as a short notification which will tell an author that featured image will be selected automatically if an author hasn’t chosen one by himself. So, how to change that text which reads “Set featured image” to something else?

  1. Open functions.php file of the theme you’re using
  2. Copy and paste the following code:
  3. function change_featured_image_text( $content ) {
        return $content = str_replace( __( 'Set featured image' ), __( 'Your custom text goes here' ), $content);
    }
    add_filter( 'admin_post_thumbnail_html', 'change_featured_image_text' );
  4. Change the ‘Your custom text goes here’ but don’t forget to leave the single quotes
  5. Save changes
  6. Go to any post and see the changed text

Wrapping up

Featured images are probably the most important media file type that you will have on your blog. Because of that, it is crucial that they look good. While having a beautiful photo or a nicely generated computer image is essential, you should do all that’s in your power to make it as good as it can get.

Luckily, you don’t have to be a developer or have a complete understanding of how WordPress processes images. You just a need a simple plugin or code snippet that will help you set new featured images; we hope that this guide helped you with that.

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

Leave a Reply

Your email address will not be published. Required fields are marked *