WordPress Featured Image Tutorial

WordPress Featured Image Tutorial


In this lesson we learn how to register new “image sizes” which specify the size and aspect ratio of the image that WordPress should automatically generate. Check out my “Get a Developer Job” course:

To view a complete list of the WordPress lessons in sequential order visit:

Link to download .zip of theme files as shown in this video (note: this is not a “complete” WordPress theme yet and this download is only intended for educational purposes to dissect and review):

Want to share the WordPress website that you’ve been creating on your computer with the world? Learn about the web host I use and how you can get a domain + hosting for .95 a month ( savings):

Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at

Follow LearnWebCode on Twitter for resources and updates:

22 Comments

22 Replies to “WordPress Featured Image Tutorial”

  1. Great tutorial series!
    The funny thing is I updated to WP 4.7 after the third video… I solved the problems I faced out but now I can´t upload the feature image.
    Everything seems to work properly but when I return to the Edit post view the Featured Image box shows no thumbsview. (even more, when I create or modifya post -update- the url that ends with the post.php show me a blank page)
    Does anybody have the same problem? Know how to fix it? Thanks

  2. The conditional logic I have works:

    <article class="post has-thumbnail”>

    But as soon as my loop hits the first post with thumbnails, it applies the ‘has-thumbnail’ class to *every* subsequent post that’s retrieved instead of just that one post. Anyone encounter a similar problem and know how to fix?

  3. I’m having two problems with featured image:

    1. I cannot see my uploaded images once I click “Set featured image.” (I also have this same problem with putting images into my post’s content. I can avert this problem, though, by inserting the photo via URL, but I shouldn’t have to do that and the URL option is not applicable to featured images.)
    2. After I select a featured image from my computer, no photo is in the preview box. Nothing gets inserted, however, when I go to the media section in my dashboard, you can see that the featured image has been attached to my post. The image just won’t appear in the preview box and on my website.

    There is nothing about this on Google that has helped me. Has anyone experienced a similar problem? Any tips? Thank you.

    Edit: I switched to default themes and realized this is a problem specifically with the theme I created. Is this a coding problem?

  4. Hi! This is highly informative. But I am using the TwentyEleven theme, so my index.php looks different. Could you tell me how to add a thumbnail image to my post excerpt on the frontpage? Thank you!

  5. Curious if there is a way to add a featured image to your posts so that it shows on the homepage as a thumbnail, but doesn’t show when you click on the full post?

  6. damn i watching from 1 to end it’s very very comfortable, easy to understand…
    thanks bro !
    btw this is best tutorial i ever see 😀

  7. How to make my themes not crop the featured image? I want the thumbnail stay the same what I uploaded, they must not be cropped. Thanks

  8. I cannot add a featured image; when I upload, it is not displayed there???!!! I even cannot remove my previous featured images???!!! what is the problem? how can I solve it?
    Thanks

  9. Hey you are amazing. Love your videos, can you tell me how to make this featured img into a link? that when i click on it redirects to a external Url ?
    Please help

  10. Excellent. Thanks! from the coastal bliss of Coffs Harbour in Australia. Now because of this my blogs will rock and I’ll be able to afford to stay here…

  11. When my excerpt is only a short sentence, the image extends past the bottom of the post boundary. Has anyone figured out how to fix this and make the bottom of the post align with the image? I saw someone else say they’ve encountered the issue as well, so I’m hoping someone can help :/

  12. Thank you, I do not speak English, but I understand because of good teaching.

  13. One small problem with this CSS setup: if the thumbnail images on the index page are taller than the excerpt, they can end up hanging down over the border into the next article.

  14. Great!! Please generate more tutorials, there are so many addicted ones like me….

  15. Is there a way to set the featured image as a background image of the whole page?

Comments are closed.