{"id":12743,"date":"2018-12-30T16:00:36","date_gmt":"2018-12-30T16:00:36","guid":{"rendered":"https:\/\/www.hostinger.com\/tutorials\/?p=12743"},"modified":"2025-12-02T15:38:53","modified_gmt":"2025-12-02T15:38:53","slug":"wordpress-featured-images","status":"publish","type":"post","link":"\/ca\/tutorials\/wordpress-featured-images","title":{"rendered":"What is a WordPress featured image and how to add it"},"content":{"rendered":"<p>Visual elements in a WordPress site can capture the attention of visitors &ndash; when paired with well-written text, they can also significantly boost content value.<\/p><p>The content management system (CMS) has various features that incorporate visuals into a website &ndash; one of them is the WordPress featured image. Featured images add more context to your posts and pages, encouraging people to click on them.<\/p><p>This article covers the featured image in WordPress &ndash; what it is, how to add it to a blog post, and how to enable it. We will also provide tips on using featured images on your WordPress website.<\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/WordPress-SEO-Checklist.pdf\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/12\/WordPress-SEO-Checklist-banner-1024x283.png\" alt=\"\" class=\"wp-image-72171\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p>\n\n\n\n<div class=\"protip\">\n                    <h2 class=\"featured-snippet title\">What Is WordPress Featured Image?<\/h2>\n                    <p>A WordPress featured image is the primary image that represents your post or page. It usually appears at the top of the post and on other social media platforms when you share the post.<\/p>\n                <\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-how-to-add-a-wordpress-featured-image\">How to Add a WordPress Featured Image<\/h2><p>Adding a WordPress featured image is a straightforward process. You only need to upload or select an image for each post or page.<\/p><p>That said, there are other ways to utilize featured images on WordPress, such as using them as thumbnail previews and automatically setting one from post images.<\/p><h3 class=\"wp-block-heading\" id=\"h-how-to-add-a-featured-image-to-a-wordpress-page-or-post\">How to Add a Featured Image to a WordPress Page or Post<\/h3><p>Most WordPress themes enable featured images by default. You can also manually add one to any post or page via the <a href=\"\/ca\/tutorials\/gutenberg-wordpress\">Gutenberg block editor<\/a>.<\/p><p>These are the steps to add a featured image to a new blog post:<\/p><ol class=\"wp-block-list\">\n<li>Open the block editor by navigating to <strong>Posts<\/strong> &rarr; <strong>Add New<\/strong>. Alternatively, select any existing post or page.<\/li>\n\n\n\n<li>The right sidebar should appear in the block editor. If not, click the <strong>Settings <\/strong>button on the top-right corner of the editor.<\/li>\n\n\n\n<li>Scroll down to the <strong>Featured image<\/strong> section and click <strong>Set featured image<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/WordPress-post-editor-with-the-highlighted-set-featured-image-button.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"525\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/WordPress-post-editor-with-the-highlighted-set-featured-image-button-1024x525.png\" alt=\"WordPress post editor with the highlighted set featured image button\" class=\"wp-image-76531\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"4\">\n<li>Upload the featured image to WordPress or select from the images in your media library. After choosing the featured image, <a href=\"\/ca\/tutorials\/how-to-add-alt-tags-to-images-in-wordpress\">add the alternative text<\/a> in the <strong>Attachment details <\/strong>section.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/WordPress-media-library-pop-up-showing-the-selected-featured-image-and-the-attachment-details-panel.png\"><img loading=\"lazy\" decoding=\"async\" width=\"928\" height=\"632\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/WordPress-media-library-pop-up-showing-the-selected-featured-image-and-the-attachment-details-panel.png\" alt=\"WordPress media library pop-up, showing the selected featured image and the attachment details panel\" class=\"wp-image-76533\"  sizes=\"auto, (max-width: 928px) 100vw, 928px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"5\">\n<li>Click <strong>Set featured image <\/strong>on the bottom right corner.<\/li>\n<\/ol><p>The featured image is now set. It doesn&rsquo;t appear on the editor panel, but you can see it in the <strong>Featured image <\/strong>section or the post preview.<\/p><p>You will now see the <strong>Replace Image <\/strong>button. This lets you change the featured image by uploading a new one or an existing image uploaded to the media library. Alternatively, use the <strong>Remove featured image <\/strong>button to clear the featured image from the post or page.<\/p><p>For further guidance on working with images, explore our guide on <a href=\"\/ca\/tutorials\/website\/how-to-add-image-or-logo-to-your-website\">how to insert an image in HTML<\/a>, which complements these WordPress techniques.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/WordPress-post-editor-with-a-featured-image-set.png\"><img loading=\"lazy\" decoding=\"async\" width=\"968\" height=\"423\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/WordPress-post-editor-with-a-featured-image-set.png\" alt=\"WordPress post editor with a featured image set\" class=\"wp-image-76534\"  sizes=\"auto, (max-width: 968px) 100vw, 968px\" \/><\/a><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-how-to-set-wordpress-featured-image-size\">How to Set WordPress Featured Image Size<\/h3><p>Choosing the right featured image size is important. It makes your overall page look great and ensures the post thumbnail looks good on other platforms.<\/p><p>While you can choose your preferred WordPress featured image size, <strong>1200 x 628 pixels<\/strong> or <strong>16:8.4<\/strong> aspect ratio is a good starting point. You can use smaller images to speed up the load time, especially on mobile devices.<\/p><p>WordPress themes have default featured image size settings that may not suit your preferences. Consider changing the image dimensions using one of the following methods.<\/p><p><strong>Classic Themes<\/strong><\/p><p>Whenever you upload images to WordPress, you will find four default <a href=\"\/ca\/tutorials\/wordpress-images-sizes\">image sizes<\/a> in the WordPress settings:<\/p><ul class=\"wp-block-list\">\n<li>Thumbnail (150 px square)<\/li>\n\n\n\n<li>Medium (maximum 300 px width and height)<\/li>\n\n\n\n<li>Large (maximum 1024 px width and height)<\/li>\n\n\n\n<li>Full-size (original image)<\/li>\n<\/ul><p>Some WordPress themes use one of these default image sizes for the featured image. You can change its size by following these steps:<\/p><ol class=\"wp-block-list\">\n<li>Inspect the size by opening a blog post with a featured image. Right-click on the blog featured image and select the <strong>Inspect<\/strong> tool on your browser.<\/li>\n\n\n\n<li>See the image class in the <strong>&lt;img&gt; <\/strong>tag. For example, if the class shows <strong>attachment-large size-large<\/strong>, the featured image uses the default <strong>Large<\/strong> media settings.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/The-img-HTML-tag-for-the-featured-image-with-the-class-highlighted-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"778\" height=\"194\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/The-img-HTML-tag-for-the-featured-image-with-the-class-highlighted-1.png\" alt=\"The HTML tag for the featured image, with the class highlighted\" class=\"wp-image-77387\"  sizes=\"auto, (max-width: 778px) 100vw, 778px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"3\">\n<li>Open your WordPress dashboard and navigate to <strong>Settings &rarr; Media<\/strong>. In this media settings panel, you&rsquo;ll see all settings for each image size. Change the dimension to your preferred image size, then click <strong>Save Changes<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/WordPress-media-settings-panel.png\"><img loading=\"lazy\" decoding=\"async\" width=\"742\" height=\"670\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/WordPress-media-settings-panel.png\" alt=\"WordPress media settings panel\" class=\"wp-image-76536\"  sizes=\"auto, (max-width: 742px) 100vw, 742px\" \/><\/a><\/figure><\/div><p>Some WordPress themes use proprietary featured image dimensions. In this case, check the theme settings in the <strong>Customizer <\/strong>by navigating to <strong>Appearance &rarr; Customize<\/strong>. You may find the option to adjust the featured image size on the sidebar.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/Featured-image-settings-section-in-the-WordPress-Customizer.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"630\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/Featured-image-settings-section-in-the-WordPress-Customizer-1024x630.png\" alt=\"Featured image settings section in the WordPress Customizer\" class=\"wp-image-76537\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p><div><p class=\"important\"><strong>Important!<\/strong> If you don&rsquo;t find any option to change the default featured image size, modify the theme&rsquo;s file. This requires technical knowledge, and the method may vary between themes. We recommend reading the theme&rsquo;s documentation or seeking help from its support team.<\/p><\/div>\n\n\n\n<\/p><p>Sometimes, you must regenerate the image thumbnails. You can do this by installing and activating the <a href=\"https:\/\/wordpress.org\/plugins\/regenerate-thumbnails-advanced\/\" target=\"_blank\" rel=\"noreferrer noopener\">reGenerate Thumbnails Advanced<\/a> WordPress plugin.<\/p><p>Access the tool from <strong>Tools &rarr; Regenerate Thumbnails <\/strong>and click <strong>Regenerate <\/strong>on the plugin&rsquo;s panel. It will automatically adjust WordPress thumbnail dimensions for all existing images.<\/p><p><strong>Block Themes<\/strong><\/p><p>Adjust WordPress featured image dimensions by modifying the template in <strong>Site Editor<\/strong>. First, open the template by following these steps:<\/p><ol class=\"wp-block-list\">\n<li>Go to <strong>Appearance &rarr; Editor <\/strong>from your WordPress dashboard.<\/li>\n\n\n\n<li>Click the WordPress or your website icon on the top left corner to open the navigation sidebar. Select <strong>Templates<\/strong>.<\/li>\n\n\n\n<li>Choose the <strong>Single <\/strong>template to <a href=\"\/ca\/tutorials\/wordpress-post-template\">customize the post template<\/a> or <strong>Page <\/strong>to customize the page template.<\/li>\n<\/ol><p>Most block themes already include the featured image block in the template. To adjust the featured image width, transform the block into a nested group block by following these steps:<\/p><ol class=\"wp-block-list\">\n<li>Click on the featured image block.<\/li>\n\n\n\n<li>Open the block settings panel and open the <strong>styles<\/strong> tab.<\/li>\n\n\n\n<li>Scroll down and find the <strong>Aspect ratio<\/strong> section. You will find the drop-down menu to select the featured image&rsquo;s aspect ratio. Alternatively, you can specify the height and width of the featured image using the fields below.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/09\/featured-image-aspect-ratio.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1138\" height=\"600\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/09\/featured-image-aspect-ratio.png\" alt=\"The site editor interface when editing a post template, showing the block settings panel for the featured image block with the Aspect Ratio section highlighted\" class=\"wp-image-93793\"  sizes=\"auto, (max-width: 1138px) 100vw, 1138px\" \/><\/a><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-how-to-set-the-featured-images-in-wordpress-automatically\">How to Set the Featured Images in WordPress Automatically<\/h3><p>Sometimes, you may want to publish a post but forget to add a featured image or haven&rsquo;t found the right one yet. In this case, setting up a default featured image can help you maintain blog consistency.<\/p><p>Use the <a href=\"https:\/\/wordpress.org\/plugins\/quick-featured-images\/\" target=\"_blank\" rel=\"noreferrer noopener\">Quick Featured Images<\/a> plugin to easily create a default featured image rule. Once the plugin is installed and activated, navigate to <strong>Featured Images &rarr; Default Images <\/strong>from your WordPress dashboard.<\/p><p>There are two default rules to choose from. We recommend activating the second rule, which assigns the first photo in the post or page as its featured image.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/Quick-Featured-Images-settings-panel-with-the-highlighted-section-to-activate-automated-featured-images..png\"><img loading=\"lazy\" decoding=\"async\" width=\"906\" height=\"503\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/Quick-Featured-Images-settings-panel-with-the-highlighted-section-to-activate-automated-featured-images..png\" alt=\"Quick Featured Images settings panel, with the highlighted section to activate automated featured images\" class=\"wp-image-76541\"  sizes=\"auto, (max-width: 906px) 100vw, 906px\" \/><\/a><\/figure><\/div><p>Alternatively, create a custom rule that assigns a default featured image.<\/p><p>Click <strong>Choose Image <\/strong>on the third row and select the default featured image. Then, select the taxonomy to apply the default featured image. For example, you can apply the rule to all posts or a certain category. Once you&rsquo;re done, click <strong>Save Changes<\/strong>.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/Quick-Featured-Images-settings-panel-with-the-highlighted-option-to-add-custom-rule.png\"><img loading=\"lazy\" decoding=\"async\" width=\"729\" height=\"473\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/Quick-Featured-Images-settings-panel-with-the-highlighted-option-to-add-custom-rule.png\" alt=\"Quick Featured Images settings panel, with the highlighted section to activate automated featured images.\" class=\"wp-image-76544\"  sizes=\"auto, (max-width: 729px) 100vw, 729px\" \/><\/a><\/figure><\/div><p>To add more rules, click the <strong>Add rule <\/strong>button below the table. This way, you can assign unique featured images to different categories and post types.<\/p><h3 class=\"wp-block-heading\" id=\"h-how-to-add-thumbnail-previews-for-your-posts-and-pages-lists\">How to Add Thumbnail Previews For Your Posts and Pages Lists<\/h3><p>The default WordPress admin panel shows various WordPress posts and pages information, such as author, date, categories, and comment count. With the <strong>Quick Featured Images<\/strong> plugin, you can add thumbnails to the list to check whether it already has a featured image.<\/p><p>Go to <strong>Featured Images &rarr; Settings <\/strong>from your dashboard. In the <strong>Columns for featured images in posts lists <\/strong>section, check <strong>Posts <\/strong>and <strong>Pages<\/strong>. Then, click <strong>Save Changes <\/strong>at the bottom of the page.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/Quick-Featured-Images-settings-panel-with-the-highlighted-options-to-add-featured-image-previews.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"451\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/Quick-Featured-Images-settings-panel-with-the-highlighted-options-to-add-featured-image-previews-1024x451.png\" alt=\"Quick Featured Images settings panel with the highlighted options to add featured image previews\" class=\"wp-image-76542\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>Now, go to the post list by navigating to <strong>Posts &rarr; All Posts<\/strong>. You should see the new column that previews the featured images. There should be links to change, edit, and remove old featured images. If a post doesn&rsquo;t have a featured image, there&rsquo;s a link to quickly add one.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/WordPress-posts-list-page-showing-the-table-that-contains-featured-image-preview.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"668\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/WordPress-posts-list-page-showing-the-table-that-contains-featured-image-preview-1024x668.png\" alt=\"WordPress posts list page, showing the table that contains featured image preview\" class=\"wp-image-76546\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-how-to-enable-wordpress-featured-images\">How to Enable WordPress Featured Images<\/h2><p>Most WordPress themes support featured images and allow you to upload one to any post or page. However, a select few may not support featured images. In this case, you won&rsquo;t see the <strong>Set featured image<\/strong> option on the block editor and must manually enable it.<\/p><p><strong>Classic themes<\/strong><\/p><p>Manually add featured image support to any WordPress theme by adding the following code snippet into the theme&rsquo;s <strong>functions.php<\/strong> file:<\/p><pre class=\"wp-block-preformatted\">add_theme_support( 'post-thumbnails' );<\/pre><p>The theme now should support featured images, and the settings should be available on the editor. However, the <strong>add theme support<\/strong> flag only enables the support, not displaying the image on the front-end.<\/p><p>To make the theme display featured images on all posts and pages, add the following code snippet to the theme&rsquo;s templates:<\/p><pre class=\"wp-block-preformatted\">&lt;?php the_post_thumbnail(); ?&gt;<\/pre><p>The specific file that needs to be edited will vary depending on your theme.<\/p><p>To display the image on posts and pages, add the code to the corresponding templates &ndash; usually <strong>single.php <\/strong>and <strong>page.php<\/strong>. You can apply the PHP code to any custom template files, too.<\/p><p>To open the template files, open the file manager from your host&rsquo;s control panel or an <a href=\"\/ca\/tutorials\/ftp\/filezilla-ftp-configuration\">FTP client<\/a>. Go to <strong>public_html &rarr; wp_content &rarr; themes<\/strong>, and select the active theme&rsquo;s folder. You should find all the template files there.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/File-manager-interface-showing-the-theme-folder-content.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"519\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/File-manager-interface-showing-the-theme-folder-content-1024x519.png\" alt=\"File manager interface showing the theme folder content\" class=\"wp-image-76547\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>Alternatively, use the theme file editor by navigating to <strong>Appearance &rarr; Theme File Editor. <\/strong>Find the template files on the right sidebar.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/WordPress-theme-file-editor-with-the-single-page-template-selected-for-editing.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"624\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/WordPress-theme-file-editor-with-the-single-page-template-selected-for-editing-1024x624.png\" alt=\"WordPress theme file editor with the single page template selected for editing\" class=\"wp-image-76549\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>You should now be able to use featured images in WordPress. As an alternative to the method above, install WordPress plugins that fix compatibility issues, such as <a href=\"https:\/\/wordpress.org\/plugins\/featured-image-from-url\/\" target=\"_blank\" rel=\"noreferrer noopener\">Featured Image From URL<\/a>.<\/p><p><strong>Block themes<\/strong><\/p><p>To add featured images on WordPress block themes, modify the theme files via the <strong>Site Editor<\/strong>. Follow these steps to open the template in the <strong>Site Editor<\/strong>:<\/p><ol class=\"wp-block-list\">\n<li>Go to <strong>Appearance &rarr; Editor <\/strong>from your dashboard.<\/li>\n\n\n\n<li>Click the WordPress icon on the top left corner to open the navigation sidebar and select <strong>Templates<\/strong>.<\/li>\n\n\n\n<li>Choose the <strong>Single <\/strong>template to customize the post template or <strong>Page <\/strong>to customize the page template.<\/li>\n<\/ol><p>Click on the editor area where you want to locate the featured image. Then, add the featured image block by typing <strong>\/featured-image<\/strong> or clicking the <strong>+<\/strong> icon on the editor and searching <strong>post featured image<\/strong>.<\/p><figure class=\"wp-block-image aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/WordPress-Site-Editor-showing-the-block-inserter-to-the-add-post-featured-image-block.png\"><img loading=\"lazy\" decoding=\"async\" width=\"865\" height=\"413\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/WordPress-Site-Editor-showing-the-block-inserter-to-the-add-post-featured-image-block.png\" alt=\"WordPress Site Editor, showing the block inserter to the add post featured image block\n\" class=\"wp-image-76550\"  sizes=\"auto, (max-width: 865px) 100vw, 865px\" \/><\/a><\/figure><p>The featured image placeholder will now appear on the template. When you open any post with the featured image set, it will appear in the placeholder area.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/WordPress-Site-Editor-showing-the-post-featured-image-placeholder.png\"><img loading=\"lazy\" decoding=\"async\" width=\"868\" height=\"564\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/WordPress-Site-Editor-showing-the-post-featured-image-placeholder.png\" alt=\"WordPress Site Editor, showing the post featured image placeholder\" class=\"wp-image-76551\"  sizes=\"auto, (max-width: 868px) 100vw, 868px\" \/><\/a><\/figure><\/div><?xml encoding=\"utf-8\" ?><figure class=\"wp-block-image size-large\"><a class=\"hgr-tutorials-cta hgr-tutorials-cta-wordpress-hosting\" href=\"\/ca\/wordpress-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner-1024x300.png\" alt=\"\" class=\"wp-image-111781\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-tips-for-wordpress-featured-images\">Tips for WordPress Featured Images<\/h2><p>Using featured images strategically is important as they are prominent visual aspects of a WordPress website. Let&rsquo;s look at ways to maximize the use of WordPress featured images.<\/p><h3 class=\"wp-block-heading\" id=\"h-use-a-suitable-image\">Use a Suitable Image<\/h3><p>WordPress featured images should properly represent the content. Visitors will see featured images when they first open the post or page. They may leave if the featured image is unrelated to the topic or search intent.<\/p><p>One of the best practices is creating uniquely designed featured images that have the same style as your blog. However, this may require more time and a dedicated team of graphic designers, which is hard to afford for new blogs.<\/p><p>If you have just started your blog, third-party <a href=\"https:\/\/creativecommons.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Creative Common-licensed<\/a> pictures are the easiest way to find suitable featured images.<\/p><p>There are various Creative Common license types available. We recommend choosing images that are <a href=\"https:\/\/creativecommons.org\/share-your-work\/public-domain\/cc0\/\" target=\"_blank\" rel=\"noreferrer noopener\">CC0-licensed<\/a>. You can freely adapt CC0-licensed images for your website, including adjusting the color tone and remixing them.<\/p><p>Find CC0 images on platforms like <a href=\"https:\/\/www.pexels.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Pexels<\/a> and <a href=\"https:\/\/unsplash.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Unsplash<\/a>. WordPress also has a <a href=\"https:\/\/wordpress.org\/photos\/\" target=\"_blank\" rel=\"noreferrer noopener\">photo directory<\/a> containing thousands of CC0 images uploaded by contributors.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/WordPress-photo-directory.png\"><img loading=\"lazy\" decoding=\"async\" width=\"871\" height=\"489\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/WordPress-photo-directory.png\" alt=\"WordPress photo directory\" class=\"wp-image-76554\"  sizes=\"auto, (max-width: 871px) 100vw, 871px\" \/><\/a><\/figure><\/div><p><div><p class=\"important\"><strong>Important!<\/strong> Don&rsquo;t use Google Images as they may be protected by copyright. Using a copyrighted image can lead to legal issues.<\/p><\/div>\n\n\n\n<\/p><p>We also recommend keeping the featured image style consistent. For example, if you use 3D graphic design, all featured images should have the same style. Or, if you apply duotone filters to all posts, ensure that all featured images are duotone, as well.<\/p><h3 class=\"wp-block-heading\" id=\"h-optimize-your-featured-images\">Optimize Your Featured Images<\/h3><p>Image sizes are larger, making them slower to load than text-based content. Optimizing featured images in WordPress is important to <a href=\"\/ca\/tutorials\/speed-up-wordpress\">speed up the loading time<\/a>.<\/p><p>The easiest way to <a href=\"\/ca\/tutorials\/optimize-images-wordpress\/\">optimize images<\/a> is by using image optimization plugins. They can compress images in the WordPress media library while retaining quality. They also automatically compress new featured images when you upload them to WordPress.<\/p><p>Here are some of the best image optimizer plugins:<\/p><ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wordpress.org\/plugins\/shortpixel-image-optimiser\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>ShortPixel Image Optimizer<\/strong><\/a> &ndash;<strong> <\/strong>uses lossy and lossless image compression to optimize files of any type, including <strong>PNG<\/strong>, <strong>JPG<\/strong>, and <strong>GIF<\/strong>.<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/imagify\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Imagify<\/strong><\/a> &ndash;<strong> <\/strong>offers three different levels of compression &ndash; normal, aggressive, and ultra.<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/wp-smushit\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>WP Smush<\/strong><\/a> &ndash;<strong> <\/strong>scans images both on your WordPress site and media library. The free version can compress up to 50 files at once.<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/optimole-wp\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Optimole<\/strong><\/a> &ndash;<strong> <\/strong>provides lazy loading and serves images via a Content Delivery Network (CDN).<\/li>\n<\/ul><p>Check out our <a href=\"\/ca\/tutorials\/complete-guide-to-image-optimization\">image optimization guide<\/a> for tips and recommended tools.<\/p><h3 class=\"wp-block-heading\" id=\"h-use-the-featured-image-in-a-cover-block\">Use the Featured Image in a Cover Block<\/h3><p>A new feature included in WordPress 6.0 allows users to use a featured image in the cover block. This adds the possibility to display featured images with text or color overlays.<\/p><p>Firstly, open the template by following these steps:<\/p><ol class=\"wp-block-list\">\n<li>Go to <strong>Appearance &rarr; Editor <\/strong>to open the <strong>Site Editor<\/strong>.<\/li>\n\n\n\n<li>Click the WordPress or website icon on the top left corner to open the navigation sidebar and select <strong>Templates<\/strong>.<\/li>\n\n\n\n<li>Choose the <strong>Single <\/strong>template to customize the post template or <strong>Page <\/strong>to customize the page template.<\/li>\n<\/ol><p>Usually, the template already has a featured image block. You can remove and replace it with a cover block. To do this, click the <strong>Use featured image <\/strong>option on the cover block placeholder. The cover block will load the post&rsquo;s featured image on the front-end.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/WordPress-cover-block-placeholder-with-the-highlighted-use-featured-image-button.png\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"313\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/WordPress-cover-block-placeholder-with-the-highlighted-use-featured-image-button.png\" alt=\"WordPress cover block placeholder with the highlighted use featured image button\" class=\"wp-image-76556\"  sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/a><\/figure><\/div><p>Now you can customize the overlay. For example, set the post title to overlay the cover block. You can add color overlay from the cover block&rsquo;s settings panel and adjust its opacity.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/A-cover-block-with-a-featured-image-and-post-title-overlay.png\"><img loading=\"lazy\" decoding=\"async\" width=\"728\" height=\"516\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/A-cover-block-with-a-featured-image-and-post-title-overlay.png\" alt=\"A cover block with a featured image and post title overlay\" class=\"wp-image-76557\"  sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2><p>A WordPress featured image enhances your site&rsquo;s visuals and captures your visitors&rsquo; attention. It also provides contextual information to encourage people to click on your posts.<\/p><p>WordPress has built-in featured image support. You can also set the featured image automatically to ensure your post always has one.<\/p><p>We hope this guide has helped you understand more about WordPress featured images and their importance to your site. And remember, optimizing images and adding alt text help maximize your <a href=\"\/ca\/tutorials\/wordpress-seo-tips\">SEO opportunities<\/a>.<\/p><p><div class=\"protip\">\n                    <h4 class=\"title\">Learn What Else You Can Do With WordPress<\/h4>\n                    <p><br>\n<a href=\"\/ca\/tutorials\/wordpress\">Complete WordPress Tutorial<\/a><br>\n<a href=\"\/ca\/tutorials\/wordpress-tags\">How to Use WordPress Tags<\/a><br>\n<a href=\"\/ca\/tutorials\/how-to-install-wordpress\">How to Install WordPress<\/a><br>\n<a href=\"\/ca\/tutorials\/wordpress-maintenance-mode\">How to Enable Maintenance Mode in WordPress<\/a><br>\n<a href=\"\/ca\/tutorials\/change-wordpress-password\/\">How to Change User Password in WordPress<\/a><br>\n<a href=\"\/ca\/tutorials\/how-to-add-wordpress-related-posts\">How to Add Related Posts in WordPress<\/a> <\/p>\n                <\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-what-is-a-wordpress-featured-image-faq\">What Is a WordPress Featured Image &ndash; FAQ<\/h2><p>We&rsquo;ve discussed all you need to know about the featured image in WordPress. If you have questions, check out the following FAQ answers or leave a comment.<\/p><div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1675084862240\"><h3 class=\"schema-faq-question\">Why Should I Use a Featured Image?<\/h3> <p class=\"schema-faq-answer\">The featured image captures viewers&rsquo; attention by using eye-catching visuals that represent the post content. Featured images also appear on the WordPress homepage and social media shares, helping you increase your blog posts&rsquo; traffic.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1675084872645\"><h3 class=\"schema-faq-question\">Why Is My Featured Image Not Showing?<\/h3> <p class=\"schema-faq-answer\">There are many possible reasons why your featured image is not showing in your <a href=\"\/ca\/tutorials\/what-is-wordpress\">WordPress CMS<\/a>. For example, an HTTP error when uploading a featured image, a lazy loading plugin error, and missing featured image support from the theme. Read our tutorial to solve the <a href=\"\/ca\/tutorials\/wordpress-featured-image-not-showing\">featured images not showing error<\/a>.&nbsp;<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1675084880428\"><h3 class=\"schema-faq-question\">Are Featured Images Good for SEO?<\/h3> <p class=\"schema-faq-answer\">Yes, featured images and thumbnails are good for search engines as they grab viewers&rsquo; attention, encouraging them to click on your post. Adding relevant alt texts to featured images also helps them rank on the image search results page. Be sure to optimize the featured image to make it load quickly.&nbsp;<\/p> <\/div> <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Visual elements in a WordPress site can capture the attention of visitors &ndash; when paired with well-written text, they can also significantly boost content value. The content management system (CMS) has various features that incorporate visuals into a website &ndash; one of them is the WordPress featured image. Featured images add more context to your [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/ca\/tutorials\/wordpress-featured-images\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":180,"featured_media":139940,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"WordPress Featured Image: What Is It and How to Add Them","rank_math_description":"A WordPress featured image is the primary image that represents your post or page. Learn how to add one and the best practices here.","rank_math_focus_keyword":"wordress featured image","footnotes":""},"categories":[22697,22692],"tags":[],"class_list":["post-12743","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-content-creation","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-featured-images","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/como-crear-galeria-wordpress","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/featured-image-wordpress","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-featured-images","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/wordpress-featured-images\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/wordpress-featured-images\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/como-crear-galeria-wordpress\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/como-crear-galeria-wordpress\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/crear-galeria-wordpress","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-featured-images","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-featured-images","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-featured-images","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-featured-images","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/posts\/12743","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/users\/180"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/comments?post=12743"}],"version-history":[{"count":71,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/posts\/12743\/revisions"}],"predecessor-version":[{"id":139939,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/posts\/12743\/revisions\/139939"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/media\/139940"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/media?parent=12743"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/categories?post=12743"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/tags?post=12743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}