Featured images are a crucial part of WordPress blogs, as they usually appear on top of individual blog posts or, in reduced size, on the blog page that lists your posts. Though they are not mandatory, the application of featured images helps your posts look better, ties the content in visitors’ minds to a header picture, and helps your SEO (Search Engine Optimization). Therefore, not adding them can be detrimental to your success. Luckily, the ability to get and add a featured image, whether for blog posts via WordPress editors or to your projects via code, is straightforward. We’ll demonstrate it all.
Instructions to add a featured image to a WordPress post
The vast majority of WordPress themes, even if they aren’t blog-oriented, support featured images on a blog page template to appease a large portion of the user base. Therefore, adding featured images to your posts, pages, or custom post types looks like this:
- Go to Posts → All Posts or Pages → All Pages, and open a page, post, or custom post type.
- Once it opens, do the following based on the editor:
1. Functionality of featured images in Classic Editor
Find the “Featured image” section on the right-hand side and click on Set featured image. When the image window opens, go to the “Upload files” tab. Upload an image fitting for your blog. Configure the size and aspect ratio, and compress for web use before doing so. We talked about this in our guide on serving scaled images in WordPress.
If you made the mistake of uploading old images that way, replace those images as soon as possible to speed up your website and reduce storage requirements. In any case, after selecting it in the “Media Library” tab, click the Set featured image button in the bottom right corner. The image thumbnail will now appear in the previously empty section.
2. Block Editor’s featured image feature
Block Editor or Gutenberg Editor was introduced in WordPress 5.0 and is the one most website owners employ today. Therefore, these instructions for adding a featured image for WordPress Block Editor are even more important:
- After editing a custom post type, page, or post, expand the settings section in the top right corner.
- In the “Document” tab, find the entry titled Featured image.
- After clicking to expand the area, click the empty rectangle named “Set featured image”.
- Follow the same steps as above:
- Go to the “Upload Files” tab.
- Add an image from your computer by clicking the button or dragging it to the window.
- Click the Set featured image button.
As above, there are many ways to optimize your workflow and fix image uploading errors from the past. We’re referencing our image resizing guide in the method below, as well as ways to zoom an image in WordPress.
Getting featured images for your WordPress website
Things are straightforward when you prepare images of the right size that fit the content. But what if you don’t, which is the case with nearly all bloggers, especially those that publish several posts a day? You cannot use image search engines and simply claim the one you like, or pick it up from other websites. Copyright laws protect those, and you can be held liable. That’s why we propose you protect your images from being copied, something others do, too. Thus, these are primary ways of finding a featured or cover image for sites:
- Free stock image websites — Websites such as Pixabay, Unsplash, Pexels, Negative Space, New Old Stock, FreeImages, and Freepik provide royalty-free images for commercial use. You may have to modify them slightly if the creative license allows that.
- Paid stock image sites — For a per-image price or a monthly subscription, you can get access to high-quality stock images in massive dimensions. You can often edit them directly and can find a significantly greater choice of images to fit your needs.
- Art sites — You can purchase images on sites where users sell art or do commissions. These are usually costlier and slower. Thus, only use them if you can’t find a specific illustration for a blog and have extra time to dedicate.
- Create them — You can whip up images in image editing or drawing software or hire an artist to help you.
Get a featured image and post thumbnails as a WordPress theme developer
To “get a featured image in WordPress” is also relevant to theme developers. This function can be tied to adding support for these images to themes that don’t have them, editing the way they appear on the page, and making them appear on pages that didn’t support them. Regardless of what the case may be, here’s what to do:
If your theme doesn’t allow featured images, go to the unctions.php file (check how to edit themes in WordPress) and add the following line:
add_theme_support( ‘post-thumbnails’ );
After saving, you’ll notice the option now exists for posts in the WordPress Admin section. However, you still need to make them appear there on the front end. To do so, enter this line at the right place in the code:
<?php the_post_thumbnail(); ?>
Refer to our “add additional image sizes in WordPress” guide to adjust the size of the image and its thumbnail. This is enough for working with the WordPress Admin dashboard. However, if you want to do anything in PHP, you will have to write more code. For instance, to make an added featured image appear in a post inside a <img> tag, you need to add this code to the WordPress loop (WordPress 4.4 and later only):
<?php echo get_the_post_thumbnail(); ?>
Another frequent demand is resizing the image of a specific post on the front-end (also through the loop):
echo get_the_post_thumbnail( get_the_ID(), ‘large’ );
Developers also have to add parameters such as size and attributes, such as defining a size or mentioning a specific page ID. That is all part of the basics on the Feature Image page on WordPress Codex Theme Handbook. A ton more information about every parameter can be found on the get_the_post_thumbnail Code Reference page for WordPress. To give you a few examples, you can display a featured image of the current post with:
<?php echo get_the_post_thumbnail( $post_id ); ?>
If you need to configure the size of the image on the front end, you can use this argument:
<?php echo get_the_post_thumbnail( $post_id, “large”); ?>
If you deal with image selling or want to help visitors or other user roles download images or credit the website that provided them, you can use this code to display the URL for the mentioned featured image:
<?php echo get_the_post_thumbnail_url( $post_id, “medium”); ?>