Including visual elements on your website is a great way to grab the attention of your visitors. Also, when combined with a good article, a good visual element can significantly increase the informational value of your content.
Fortunately, WordPress has a variety of features that can add visual elements to a website, such as the inclusion of 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 review some plugins to optimize them.
What is WordPress Featured Image?
A featured image in WordPress, also known as a post thumbnail, can represent your posts, pages, or custom post types.
These images often accompany your posts when viewed from the archive or the home page of your website. They will also be visible when your posts are shared on other platforms.
Its location, however, depends on the WordPress theme you have chosen. Some themes display the image above or below the title, while others automatically position it to the left or right of the post.
Featured images can also appear in the widget area next to recent or popular posts.
Why use a featured image?
Featured images can greatly enhance the appearance of your website and provide an attractive image to an otherwise plain article or blog post. Images help convey ideas to readers, helping them better understand the content.
Consistent use of featured images will not only help define the visual style of your website, it will also increase your traffic: Research shows that articles that include images generate more traffic than those that don’t.
Also, incorporating keywords in the caption and image alt text can .
Enable featured images on your WordPress website
Generally, most WordPress themes support the “set featured image” option. However it is not always so.
You can quickly fix this issue by using the theme developer method and inserting the following code into the file functions.php of your theme.
add_theme_support( ‘post-thumbnails’ );
Once you’re done, your WordPress featured image settings should be available when you create or edit a blog post.
Note that the function “post thumbnails» does not make your theme automatically display or assign images. Just enable that option in the post editor of your website.
To display the images, you need to add the following code snippet to the part of your template where you want the visuals to display:
The specific file to edit will vary depending on your theme.
If you use , follow these steps to access your theme file via File Manager.
- Access your hPanel and click on the File Manager menu.
- A new window will appear with the site directory. Find the folder public_html.
- Click on wp_content -> themes.
- This folder contains all the WordPress themes installed on your site. Choose the currently active theme to edit it.
- Select the file function.php of your theme and click the icon Edit from the menu bar. This will open the text editor where you can insert the required code. Once done, click the button Save to save the changes.
You should now be able to use featured images in WordPress. As an alternative to the above method, you can install WordPress plugins that fix incompatibility issues, such as:
How to add a featured image to a post?
To add your WordPress featured images, follow these instructions:
To add featured images to posts, go to Tickets. click on Add newor choose an existing post to edit.
If you’re using the classic editor, click display options and make sure Featured Image is checked.
You will then see the tab Outstanding image in the bottom corner of the right sidebar. Once you find it, click the button Set Featured Image.
You can upload the image directly from your computer or choose one from the media library. Don’t forget to add the alt text and caption for the image, and then click Set Featured Image.
If you have followed the steps, you will have successfully added a WordPress featured image. If you want to remove the image, click the button Remove Featured Image and follow the steps above to add your new featured image.
Set WordPress Featured Image Size
Whenever you upload an image to WordPress, you will find in the settings:
- Thumbnail (150px square)
- Medium (max 300px width and height)
- Large (max 1024px width and height)
- Full size (original image)
These options are available so that you can place the images in different parts of your blog post without having to manually resize the original files. However, in some cases, these sizes may not fit your needs.
You can overcome this problem by accessing your WordPress control panel.
go to Settings -> Media. Here you will see various settings for each image size. Enter the new sizes based on your needs and click Save Changes.
If you need more sizes, you can make WordPress support custom image sizes in the file functions.php.
Automatically configure featured images in WordPress
When a blog post doesn’t have a featured image, you can set WordPress to display the attached image as the post’s thumbnail automatically.
This way, every time you save a new blog post, it will check if there is a featured image set. Otherwise, it will retrieve the first image found and display it as a featured image.
To implement this function, simply access the file functions.php of your theme 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&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’, ‘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 your post, this feature won’t display any notifications and will simply post without any images. To prevent this from happening, make sure to include at least one image.
Alternatively, you can display a popup 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; $post_status = $data; $original_post_status = $postarr; 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 = ‘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 ) ) { ?>
The function will throw an error message every time an author tries to publish a post without a featured image, which will look something like the example below.
If one is found, a success message will appear and the entry will be published.
Add thumbnail previews for your posts and pages Edit lists
The WordPress admin panel allows users to manage content properties such as author, categories, and date.
However, the default interface does not include featured images. This means that you will have to open each post manually to check if a post has a featured image.
The feature below will display featured images in the admin panel, making it easier for you to manage your content more efficiently.
Simply copy and paste the code into your theme’s functions file and save your changes.
if ( !function_exists(‘AddThumbColumn’) && function_exists(‘add_theme_support’) ) { add_theme_support(‘post-thumbnails’, array( ‘post’, ‘page’ ) ); function AddThumbColumn($cols) { $cols = __(‘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 size of thumbnail images, edit the values $width Y $height to your liking
Now, refresh the admin panel. It should display the featured images on the right side of your screen.
What are header images?
One of the new WordPress features that the Gutenberg editor brings is the cover block. Living up to its name, this feature allows you to add cover or header images.
Unlike a WordPress featured image, header images only appear on posts and pages, where they serve as post covers and section dividers. However, both elements share a similarity: not all WordPress themes support them.
To add a header image to your WordPress post, go to your WordPress dashboard and navigate through the menu to Tickets -> Add new.
Hover over the body of the editor and click the button +. Then choose Background on the tab Media.
From there, you can choose an image from…
Facebook Comments
Disqus