{"id":26929,"date":"2012-06-18T21:09:28","date_gmt":"2012-06-18T15:39:28","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=26929"},"modified":"2026-10-11T10:33:43","modified_gmt":"2026-10-11T05:03:43","slug":"post-thumbnails-wordpress-theme","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2012\/06\/post-thumbnails-wordpress-theme\/","title":{"rendered":"How to Add Post Thumbnails to Any WordPress Theme (2026)"},"content":{"rendered":"<p>Want to add post thumbnails to a WordPress theme, so each post shows its featured image on your homepage and archives? Almost every modern theme supports featured images out of the box, but older or custom themes may need a few lines of code. We added post thumbnails to our own custom theme in 2012 this way, and the same WordPress functions still work in 2026, with a few improvements.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-26933\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/post-thumbnails.png\" alt=\"Post thumbnails in a WordPress theme\" width=\"400\" height=\"256\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/post-thumbnails.png 400w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/post-thumbnails-300x192.png 300w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/p>\n<p><strong>Quick answer:<\/strong> To add post thumbnails to a WordPress theme, enable support in <code>functions.php<\/code> with <code>add_theme_support( 'post-thumbnails' );<\/code> inside an <code>after_setup_theme<\/code> hook. Then show the image in your templates with <code>the_post_thumbnail( 'medium' );<\/code> inside an <code>if ( has_post_thumbnail() )<\/code> check. Block themes don&#8217;t need code: add the <strong>Post Featured Image<\/strong> block in the Site Editor.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6af2d5ff75142\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #1a202c;color:#1a202c\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #1a202c;color:#1a202c\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6af2d5ff75142\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/06\/post-thumbnails-wordpress-theme\/#Step_1_Set_a_featured_image_on_your_posts\" >Step 1: Set a featured image on your posts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/06\/post-thumbnails-wordpress-theme\/#Step_2_Add_post_thumbnails_support_to_your_theme\" >Step 2: Add post thumbnails support to your theme<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/06\/post-thumbnails-wordpress-theme\/#Step_3_Display_post_thumbnails_in_your_templates\" >Step 3: Display post thumbnails in your templates<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/06\/post-thumbnails-wordpress-theme\/#Step_4_Style_post_thumbnails_with_CSS\" >Step 4: Style post thumbnails with CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/06\/post-thumbnails-wordpress-theme\/#Post_thumbnails_in_block_themes\" >Post thumbnails in block themes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/06\/post-thumbnails-wordpress-theme\/#Frequently_asked_questions\" >Frequently asked questions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/06\/post-thumbnails-wordpress-theme\/#Why_are_my_post_thumbnails_not_showing\" >Why are my post thumbnails not showing?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/06\/post-thumbnails-wordpress-theme\/#What_size_should_WordPress_post_thumbnails_be\" >What size should WordPress post thumbnails be?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/06\/post-thumbnails-wordpress-theme\/#Whats_the_difference_between_a_post_thumbnail_and_a_featured_image\" >What&#8217;s the difference between a post thumbnail and a featured image?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/06\/post-thumbnails-wordpress-theme\/#Can_I_add_a_default_thumbnail_for_posts_without_images\" >Can I add a default thumbnail for posts without images?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Step_1_Set_a_featured_image_on_your_posts\"><\/span>Step 1: Set a featured image on your posts<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Post thumbnails display each post&#8217;s <strong>featured image<\/strong>. In the Classic Editor, use the <strong>Featured image<\/strong> box in the right sidebar and click <strong>Set featured image<\/strong>. In the block editor, open the <strong>Post<\/strong> settings panel and choose <strong>Featured image<\/strong>. Need to add images to many old posts? See how to <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/06\/wordpress-featured-images-quickly\/\">add featured images to multiple posts quickly<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Step_2_Add_post_thumbnails_support_to_your_theme\"><\/span>Step 2: Add post thumbnails support to your theme<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Add this to your child theme&#8217;s <code>functions.php<\/code> file:<\/p>\n<pre><code>function qot_theme_setup() {\r\n    add_theme_support( 'post-thumbnails' );\r\n    add_image_size( 'qot-card', 400, 225, true ); \/\/ optional custom size\r\n}\r\nadd_action( 'after_setup_theme', 'qot_theme_setup' );<\/code><\/pre>\n<p>Using the <code>after_setup_theme<\/code> hook is the recommended way. The optional <code>add_image_size()<\/code> line creates a cropped 400&#215;225 size for new uploads; use a plugin like Regenerate Thumbnails to create it for older images.<\/p>\n<p>Tip: in a file that contains only PHP, leave out the closing <code>?&gt;<\/code> tag. Extra blank lines after it can cause &#8220;headers already sent&#8221; and <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2009\/05\/wordpress-feed-xml-parsing-errors\/\">feed XML errors<\/a>. Always keep a backup, because a mistake in <code>functions.php<\/code> can take your site down until you fix it over FTP or your host&#8217;s file manager.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Step_3_Display_post_thumbnails_in_your_templates\"><\/span>Step 3: Display post thumbnails in your templates<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In <code>index.php<\/code>, <code>archive.php<\/code> or a template part such as <code>content.php<\/code>, add this inside the loop, above the title or excerpt:<\/p>\n<pre><code>&lt;?php if ( has_post_thumbnail() ) : ?&gt;\r\n  &lt;a href=\"&lt;?php the_permalink(); ?&gt;\"&gt;\r\n    &lt;?php the_post_thumbnail( 'medium', array( 'loading' =&gt; 'lazy' ) ); ?&gt;\r\n  &lt;\/a&gt;\r\n&lt;?php endif; ?&gt;<\/code><\/pre>\n<p>You can use any registered size: <code>'thumbnail'<\/code> (150&#215;150 by default), <code>'medium'<\/code>, <code>'large'<\/code>, <code>'full'<\/code> or your own size such as <code>'qot-card'<\/code>. WordPress automatically adds <code>srcset<\/code> so browsers load the right size for each screen, plus <code>width<\/code> and <code>height<\/code> to prevent layout shift. Lazy loading keeps archive pages fast; learn more in our guide to <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/06\/lazy-load-images\/\">lazy loading images<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Step_4_Style_post_thumbnails_with_CSS\"><\/span>Step 4: Style post thumbnails with CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>WordPress adds the class <code>wp-post-image<\/code> to every post thumbnail. A simple, responsive style:<\/p>\n<pre><code>img.wp-post-image {\r\n  max-width: 100%;\r\n  height: auto;\r\n  border-radius: 8px;\r\n  margin-bottom: 1rem;\r\n}<\/code><\/pre>\n<p>For a list layout with the image beside the text, float it or use CSS grid on wider screens only, so thumbnails stack neatly on phones.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Post_thumbnails_in_block_themes\"><\/span>Post thumbnails in block themes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In block themes such as Twenty Twenty-Five, go to <strong>Appearance &gt; Editor &gt; Templates<\/strong>, open the <strong>Blog Home<\/strong> or <strong>Archive<\/strong> template, select the <strong>Query Loop<\/strong> block and add a <strong>Post Featured Image<\/strong> block. You can set its aspect ratio, size and whether it links to the post, all without code.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Frequently_asked_questions\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Why_are_my_post_thumbnails_not_showing\"><\/span>Why are my post thumbnails not showing?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Either the theme doesn&#8217;t support them, the post has no featured image, or the template doesn&#8217;t call <code>the_post_thumbnail()<\/code>. Check all three.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"What_size_should_WordPress_post_thumbnails_be\"><\/span>What size should WordPress post thumbnails be?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Upload featured images at least 1200 pixels wide (1200&#215;630 is also ideal for social sharing). WordPress creates smaller sizes automatically.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Whats_the_difference_between_a_post_thumbnail_and_a_featured_image\"><\/span>What&#8217;s the difference between a post thumbnail and a featured image?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>They&#8217;re the same thing. &#8220;Post thumbnail&#8221; is the developer term; &#8220;featured image&#8221; is the label in the editor.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Can_I_add_a_default_thumbnail_for_posts_without_images\"><\/span>Can I add a default thumbnail for posts without images?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes. Add an <code>else<\/code> branch that shows a placeholder image, or use a plugin that sets a default featured image.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Want to add post thumbnails to a WordPress theme, so each post shows its featured image on your homepage and&#8230;<\/p>\n","protected":false},"author":4,"featured_media":26933,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"default","_kad_post_title":"default","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"default","_kad_post_vertical_padding":"default","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6],"tags":[49,17],"class_list":["post-26929","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogging","tag-tutorials","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/26929","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=26929"}],"version-history":[{"count":1,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/26929\/revisions"}],"predecessor-version":[{"id":63760,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/26929\/revisions\/63760"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/26933"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=26929"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=26929"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=26929"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}