How to Modify Featured Images in WordPress

1. 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.

2. Automatically link featured post thumbnails to their original posts

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 a 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:

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 );

3. 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.

3. 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.

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:

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>
"; } }

3. Save changes
4. 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 at 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.

4. 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:

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" );

}
}

3. Save changes

This code will check the post status once the 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:

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" );
}
}

2. 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.

5. 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.

If you have used, for example, a function that 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 the 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:

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' );

3. Change the ‘Your custom text goes here’ but don’t forget to leave the single quotes
4. Save changes
5. Go to any post and see the changed text