{"id":2301,"date":"2019-11-06T15:00:05","date_gmt":"2019-11-06T13:00:05","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=2301"},"modified":"2020-08-02T02:22:06","modified_gmt":"2020-08-02T00:22:06","slug":"wordpress-featured-image","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/wordpress-featured-image\/","title":{"rendered":"How to Add Featured Images to Your WordPress Posts"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Can you imagine a blog without images? A website without photos? Not really, right? Images play a very important part in the way users perceive information. <strong>Visual content can be just as important as text<\/strong>, sometimes even more so. When it comes to WordPress, a special sort of image has a particularly important role. We&#8217;re talking about <strong>the featured image<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">What Are Featured Images<\/h2>\n<p>[\/vc_column_text][vc_column_text]A featured image allows users to post <strong>images that are representative of their post content<\/strong>. It is a feature that comes with most <a href=\"https:\/\/qodeinteractive.com\/themes-list\/\">premium WordPress themes<\/a> and its purpose is to illustrate what the post is about, to complement the text or to simply make the post look better.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]WordPress featured images can be assigned to <strong>posts, pages or custom post types<\/strong>. However, it is important to understand that they represent <strong>a theme feature<\/strong> \u2013 something that has to be enabled and supported by the theme itself, and that the way they will be displayed depends on the theme\u2019s specific settings.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]These days, almost all themes come with the featured image feature, but back in the day, especially before WordPress 2.9, this wasn\u2019t the case. Featured images had to be added and enabled using code, which was, naturally, quite frustrating.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Note that, in older versions, the Featured Image was actually called <em>Post Thumbnails<\/em>, and <a href=\"https:\/\/codex.wordpress.org\/Post_Thumbnails\" target=\"_blank\" rel=\"noopener noreferrer\"><em>that\u2019s what the WordPress Codex still calls it<\/em><\/a>, so don\u2019t get confused \u2013 it\u2019s the same thing.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Where Are Featured Images Displayed<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"395\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/11\/Blog-featured-image.jpg\" class=\"attachment-full size-full\" alt=\"Blog featured image\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/11\/Blog-featured-image.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/11\/Blog-featured-image-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/11\/Blog-featured-image-620x345.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]A featured image is basically the <strong>\u201cmain\u201d image for a page or post<\/strong>. As such, it is always displayed in a prominent position. Especially within the post itself, where it\u2019s usually located just above or below the title. The image size can vary here, but it is usually large. Given its nature, the featured image should always be a high-quality one. If the one you&#8217;re using has an inadequate resolution, you can always <a href=\"https:\/\/qodeinteractive.com\/magazine\/increase-photo-resolution-in-photoshop\/\">increase the resolution of your photo<\/a> using Photoshop, so make sure to take care of that first.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Portfolio websites<\/strong> use these images in their layout, and magazines use them on the front page along with the article title and excerpt. As thumbnails, <strong>featured images in lists and archive pages<\/strong> mostly make up the entire page. They are also commonly linked directly to the post they are attached to.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In addition to these locations, and depending on the theme, featured images can also appear in other places \u2013 for example, if the theme is using the <strong>recent posts widgets<\/strong>, a thumbnail can be added to draw the users\u2019 attention and get them to click.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The featured image sets the tone for the entire page or post and that\u2019s why it should always be chosen and edited with great care.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">How to Add a Featured Image to a Post<\/h2>\n<p>[\/vc_column_text][vc_column_text]The procedure for adding a featured image to your post is really as easy as it gets, provided, of course, that the theme you\u2019re using comes with support for this feature. Most themes do, these days, but if you happen to be using a theme that doesn\u2019t support featured images, you can add the functionality by modifying the functions.php file (which you can access through cPanel provided by your hosting company). But that\u2019s a whole different ball game and, like we said, most themes come with the featured image functionality out of the box, so let\u2019s see how to use it. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]When you start a new post, you will notice a field in the lower right corner of the screen, underneath Categories and Tags, labeled <em><strong>Featured Image<\/strong><\/em>. Simply click on<em><strong> Set featured image<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text](Note: If you can\u2019t see the <em>Set featured image<\/em> link, go to Screen Options and check the <em>Featured image<\/em> box).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Add-Featured-Images.jpg\" class=\"attachment-full size-full\" alt=\"Featured image\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Add-Featured-Images.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Add-Featured-Images-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Add-Featured-Images-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can now pick between using previously uploaded <strong>images from the Media Library or uploading a new one<\/strong>. As always, when uploading a new image, make sure to use the appropriate image size.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Add-Featured-Images-1.jpg\" class=\"attachment-full size-full\" alt=\"Choose image\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Add-Featured-Images-1.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Add-Featured-Images-1-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Add-Featured-Images-1-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you select the image you want to use, click on the <em><strong>Set featured image<\/strong><\/em> button in the lower right.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Add-Featured-Images-2.jpg\" class=\"attachment-full size-full\" alt=\"Set featured image\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Add-Featured-Images-2.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Add-Featured-Images-2-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Add-Featured-Images-2-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you\u2019re not happy with the featured image in your post, you can always change it by clicking on <em><strong>Remove featured image<\/strong><\/em> and adding a new one.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Add-Featured-Images-3.jpg\" class=\"attachment-full size-full\" alt=\"Remove featured image\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Add-Featured-Images-3.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Add-Featured-Images-3-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Add-Featured-Images-3-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Of course, you can also edit your featured image right there in the post editor.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To do this, first click on the image in the<em><strong> Featured Image<\/strong><\/em> panel. Then, under <em><strong>Attachment details<\/strong><\/em>, click on <em><strong>Edit Image<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Add-Featured-Images-4.jpg\" class=\"attachment-full size-full\" alt=\"Edit featured image\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Add-Featured-Images-4.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Add-Featured-Images-4-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Add-Featured-Images-4-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Here you can <strong>crop your image, rotate it, assign new dimensions and aspect ratio<\/strong>. You can also specify the image sizes you want your new settings to apply to. You can choose between all image sizes, thumbnail, or everything except the thumbnail.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Add-Featured-Images-5.jpg\" class=\"attachment-full size-full\" alt=\"Edit featured image options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Add-Featured-Images-5.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Add-Featured-Images-5-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Add-Featured-Images-5-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]When you\u2019re done, simply exit the image editor and hit <em><strong>Update<\/strong><\/em> or <em><strong>Publish<\/strong><\/em> to save the changes.[\/vc_column_text][vc_empty_space height=&#8221;81px&#8221;][vc_separator color=&#8221;custom&#8221; accent_color=&#8221;#f0f0f0&#8243;][vc_empty_space height=&#8221;50px&#8221;][vc_widget_sidebar sidebar_id=&#8221;top-picks-banner&#8221;][vc_empty_space height=&#8221;28px&#8221;][vc_separator color=&#8221;custom&#8221; accent_color=&#8221;#f0f0f0&#8243;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]Setting a featured image is a quick way to add that extra touch to your content. It makes your posts more appealing and illustrates what they&#8217;re about. In fact, it might be the most important media on your website. So make sure you\u2019re using a high-quality photo, <a href=\"https:\/\/qodeinteractive.com\/magazine\/increase-photo-resolution-in-photoshop\/\">in good resolution<\/a>, an image that is <a href=\"https:\/\/qodeinteractive.com\/magazine\/resize-image-in-photoshop\">cropped and sized well<\/a> and that will look amazing with the rest of your content.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>In WordPress, a featured image is the main post image and the image that represents your content. Learn how to add perfect featured images on your WordPress blog. <\/p>\n","protected":false},"author":3,"featured_media":2573,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[14,13],"class_list":["post-2301","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-core","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/2301","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=2301"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/2301\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/2573"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=2301"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=2301"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=2301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}