WordPress Featured Images

WordPress Featured Images

Including visual elements in your WordPress site is a great way to capture the attention of your visitors. Moreover, when paired with a comprehensive article, a good visual element can significantly boost the informative value of your content.

Luckily, WordPress has a variety of features that can incorporate visuals to a website, such as including featured images. 

This tutorial will cover everything you need to know about featured images – what they are, why you should use them, and how to enable them on your website. We will also go over some plugins to optimize featured images.

What Exactly is a Featured Image?

A WordPress featured image, also known as a post thumbnail, can represent your posts, pages, or custom post types. 

Such images will most commonly accompany your posts when viewed from the archive or homepage of your website. It will also be visible when your posts are shared on other platforms.

Their placement, however, depends on your chosen theme. Some themes display the image above or below the heading, while others automatically place it on the right or left side of the post. 

Featured images may also appear on the widget area along with recent or popular publications.

Screenshot of a featured image

Why Use a Featured Image?

Featured images can both greatly enhance the appearance of your site and offer an engaging visual to an otherwise plain article or blog post. Images help convey ideas to the readers, helping them understand the content better.

Not only will consistent use of featured images help you define the visual style of your site, but it will also drive up your traffic as well – research shows that articles that include images generate 94% more views than those that don’t.

What’s more, incorporating keywords on the caption and alt text of the image can boost your site’s SEO.

Enabling Featured Images on Your WordPress Website

Generally, most WordPress themes support the “set featured image” option. However, that is not always the case. 

You can quickly fix this issue by utilizing the theme developer method and inserting the following code into the functions.php file of your theme.

add_theme_support( 'post-thumbnails' );

Once you’re done, the WordPress featured image settings should be available when you create or edit a blog post.

Keep in mind that the “post thumbnails” function does not automatically make your theme display or assign the images. It only enables that option in the post editor of your site. 

To display the images, you need to add the code snippet below to the part of your template where you want the visuals to be displayed:

<?php the_post_thumbnail(); ?>

The specific file that needs to be edited will vary depending on your theme.

Follow these steps to access your theme’s file through Hostinger’s File Manager.

  1. Access your hPanel and click on the File Manager menu.Screenshot showcasing file manager in hPanel
  2. A new window will appear, displaying the site directory. Find the public_html folder. Screenshot showcasing public-html in file manager
  3. Click on wp_content -> themes.Screenshot showcasing themes folder in file manager
  4. This folder contains all WordPress themes installed on your site. Choose the currently active theme to edit.Screenshot displaying theme folders in file manager
  5. Select function.php of your theme and click the Edit icon on the menu bar. This will open the text editor where you can insert the required code. Once that is done, click on the Save button to save the changes. Screenshot showcasing functions.php in file manager

You should now be able to use featured images in WordPress. As an alternative to the method above, you can install WordPress plugins that can fix incompatibility issues, such as:

How to Add a Featured Image to a Post

To add featured images to posts, navigate to Posts. Click Add New, or choose an existing post to edit. 

Once the text editor is loaded, click on Screen Options and ensure the Featured image is checked.

Screenshot of featured image checkbox in the text editor

The featured image option is usually located at the bottom of the sidebar. Once you find it, click on the Set featured image button.

Screenshot showing the set featured image button

You can either upload the picture from your computer or choose one from the media library. Don’t forget to add the image’s alt text and caption, then click Set featured image.

Screenshot showing second set featured image button

If you’ve followed the steps, you will have successfully added a WordPress featured image. If you want to remove the image, click on the Remove featured image button.

Setting WordPress Featured Image Size

Whenever you upload an image to WordPress, you will find four default image sizes in the settings:

  • Thumbnail (150px square)
  • Medium (maximum 300px width and height)
  • Large (maximum 1024px width and height)
  • Full-size (original image)

These options are available so that you can place pictures on different parts of your blog post without having to resize the original files manually. However, in some cases, these sizes might not suit your needs. 

You can overcome this issue by accessing your WordPress dashboard. 

Navigate to Settings -> Media. Here, you will see several configurations for each image size. Input the new sizes based on your needs, then click Save Changes.

Screenshot of the save changes button in WordPress settings

If you need more sizes, you can make WordPress support custom image sizes in the functions.php file. 

Setting The Featured Images in WordPress Automatically

When a blog post doesn’t have a featured image, you can program WordPress to display the attached image as the post thumbnail automatically.

This way, whenever you save a new blog post, it will check whether there is a featured image set. Otherwise, it will retrieve the first image found and display it as the featured image. 

To implement this function, simply access your theme’s functions.php file and add the following snippet.

function auto_featured_image() {

    global $post;

    if (!has_post_thumbnail($post->ID)) {

        $attached_image = get_children( "post_parent=$post->ID&amp;post_type=attachment&amp;post_mime_type=image&amp;numberposts=1" );
         
      if ($attached_image) {

              foreach ($attached_image as $attachment_id => $attachment) {

                   set_post_thumbnail($post->ID, $attachment_id);

              }

         }

    }

}

add_action('the_post', 'auto_featured_image');

add_action('save_post', 'auto_featured_image');

add_action('draft_to_publish', 'auto_featured_image');

add_action('new_to_publish', 'auto_featured_image');

add_action('pending_to_publish', 'auto_featured_image');

add_action('future_to_publish', 'auto_featured_image');

However, if you don’t include any images in the post, this function won’t display any notifications and will simply publish it without any pictures. To prevent this from happening, make sure to include at least one image.

Alternatively, you can display a pop-up error message when the featured image is not set using the following function.

add_filter( 'wp_insert_post_data', function ( $data, $postarr ) {

    $post_id              = $postarr['ID'];

    $post_status          = $data['post_status'];

    $original_post_status = $postarr['original_post_status'];

    if ( $post_id && 'publish' === $post_status && 'publish' !== $original_post_status ) {

        $post_type = get_post_type( $post_id );

        if ( post_type_supports( $post_type, 'thumbnail' ) && ! has_post_thumbnail( $post_id ) ) {

            $data['post_status'] = 'draft';

        }

    }

    return $data;

}, 10, 2 );

add_action( 'admin_notices', function () {

    $post = get_post();

    if ( 'publish' !== get_post_status( $post->ID ) && ! has_post_thumbnail( $post->ID ) ) { ?>

        <div id="message" class="error">

            <p>

                <strong><?php _e( 'Please add featured image. This post is not published.' ); ?></strong>

            </p>

        </div>

    <?php

    }

} );

The function will trigger an error message whenever an author tries to publish a post with no featured image, which will look like the example below.

Screenshot showcasing error message

If one is found, a success message will appear, and the post will be published.

Screenshot showcasing success message

Add Thumbnail Previews For Your Posts and Pages Edit Lists

The WordPress admin panel allows users to manage such content properties as author, categories, and date. 

However, the default interface doesn’t include featured images. This means that you’ll have to open every post manually to check whether a post has an image set.

Screenshot of WordPress posts menu

The function below will display featured images on the admin panel, making it easier for you to manage your content more efficiently.

Simply copy and paste the code to your theme functions file and save the changes.

if ( !function_exists('AddThumbColumn') && function_exists('add_theme_support') ) {

add_theme_support('post-thumbnails', array( 'post', 'page' ) );

function AddThumbColumn($cols) {

$cols['thumbnail'] = __('Thumbnail');

return $cols;

}

function AddThumbValue($column_name, $post_id) {

$width = (int) 50;

$height = (int) 50;

if ( 'thumbnail' == $column_name ) {

$thumbnail_id = get_post_meta( $post_id, '_thumbnail_id', true );

$attachments = get_children( array('post_parent' => $post_id, 'post_type' => 'attachment', 'post_mime_type' => 'image') );

if ($thumbnail_id)

$thumb = wp_get_attachment_image( $thumbnail_id, array($width, $height), true );

elseif ($attachments) {

foreach ( $attachments as $attachment_id => $attachment ) {

$thumb = wp_get_attachment_image( $attachment_id, array($width, $height), true );

}

}

if ( isset($thumb) && $thumb ) {

echo $thumb;

} else {

echo __('None');

}

}

}

add_filter( 'manage_posts_columns', 'AddThumbColumn' );

add_action( 'manage_posts_custom_column', 'AddThumbValue', 10, 2 );

add_filter( 'manage_pages_columns', 'AddThumbColumn' );

add_action( 'manage_pages_custom_column', 'AddThumbValue', 10, 2 );

}

To change the thumbnail images’ size, edit the $width and $height values to your liking. 

Now, refresh the admin panel. It should display the featured images on the right side of your screen.

Screenshot showing featured images in WordPress post menu

What are Header Images?

One of the new WordPress features that Gutenberg brings to the table is the Cover Block. True to its name, this feature allows you to add cover images or header images.

Unlike a WordPress featured image, header images only appear on posts and pages where they serve as article covers and section dividers. However, the two elements share a similarity not every WordPress theme supports them. 

To add a header image to your WordPress post, go to your WordPress dashboard and navigate the menu to Posts -> Add New

Hover over the body of the editor and click the + button. Then, choose Cover from the Media tab.

Screenshot showcasing Gutenberg's Cover block

From there, you can choose a picture from the Media Library or upload a new one by clicking the Upload button. Use the toolbar to add and modify texts to the header image, like the example below.

Screenshot showcasing Gutenberg's image toolbar

Optimize Your Featured Images

Keep in mind, that large image sizes can also make a website load slower, resulting in a poor user experience. 

For that reason, image optimization is a crucial step. Optimizing images can reduce the file size and, in turn, enhance the page loading time. 

The easiest way to optimize your featured images is by installing image optimization plugins – they will automatically compress image sizes and still keep the high quality. 

Below are some of the best image optimizer plugins you can use for your site:

  • Imagify offers three different levels of compression – normal, aggressive, and ultra.
  • WP Smush scans for images both on your site and media library and can compress up to 50 files at once.

Conclusion

By making full use of featured images, you can capture the attention of your visitors, offer more informative content, and adhere to the best SEO practices. 

To help you achieve this, WordPress includes a wide variety of features and customization options, as well as plenty of alternative ways to activate the WordPress featured image functionality.

With the help of header images, users can introduce and split up their content for a better user experience. To achieve a consistent visual style, the size of featured images and their thumbnails can be freely configured as well.

If you want to optimize your images, consider installing one of the many plugins designed for the task, or tweak the settings yourself. Remember to include keywords in the alt text of your featured images, as this will result in better SEO.

We hope this guide has helped you understand more about WordPress featured images and their importance to your site. 

Author
The author

Nabilla R.

Nabilla is a WordPress expert and a digital content writer at Hostinger. When she's not busy writing, she loves to explore nature.