Published on May 27, 2014 by LearnWebCode

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. Save 40% off my premium 8 hour web design video course through April 26th: learnwebcode.com/web-design-for-beginners-real-world-coding-html-css/

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

Learn WordPress

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):

WordPress Featured Image – Custom Size

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 $4.95 a month ($60 savings): learnwebcode.com/web-hosting/

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

Follow LearnWebCode on Twitter for resources and updates:
twitter.com/learnwebcode

Leave a Reply

237 Comments on "WordPress Featured Image Tutorial"

Notify of
avatar

Patryk Urbanczyk
Guest
Patryk Urbanczyk
3 years 1 month ago

Exactly what I was looking for. Great tut!

dwayne austin
Guest
dwayne austin
3 years 2 months ago

ok, so i been busting my butt, with this feature image thing, and came to realized that the img 100% width, height auto, will overwrite the image size you set in the functions file

Louis Lombardi
Guest
Louis Lombardi
3 years 4 months ago

+LearnWebCode Thank you for your tutorials they're great. I'm having trouble with the featured images. Ive followed the tutorial correctly and i have even downloaded the code and replaced it with my code and still nothing is showing. Any reason why this might be? I'm using WordPress locally could this be why?

Christina Hotz
Guest
Christina Hotz
3 years 4 months ago

Slight problem. When using a featured image on a post that does not have much text (say two lines tops) the featured image does not stay within the article post boundaries. It hangs past the bottom border of the div. This actually happens when I install the theme you have created as well. I've been googling this for hours and can't figure out how to fix it. Can anyone help?

Pierre Symon Peralta
Guest
Pierre Symon Peralta
3 years 5 months ago

Awesome 🙂 Thanks man.

Sara Mørk
Guest
Sara Mørk
3 years 5 months ago
11:46 – Hey there! I've tried re-uploading my image into the console, however the new version of the image I've uploaded does not appear to span across the div container. It does however manage to crop the top and bottom of the image off correctly. I am guessing that this might be because the initial dimensions of the image are relatively small (530 by 353px).I've checked through my code, and it does not seem like there is any mistake within the particular parameters I've entered.<!– BEGIN CODE –>function themeName_setup() { // Add Featured image support add_theme_support('post-thumbnails'); add_image_size('small-thumbnail', 180, 120, true);… Read more »
Kaio
Guest
Kaio
3 years 4 months ago
+Sonny Fadli Hopefully you have both found your solution by now!Sara's guess was actually correct. If either the width of height of the image you're uploading is less than the width and height specified in the add_image_size function, it will not crop that dimension – because there is nothing to crop!WordPress won't stretch the image, it will only crop it, which is why Sara's original image of 530×353 was only cropped on the top and bottom – 530 is less than 920 so there's no need to crop the width, however 353 is greater than 210 and there is 143px of… Read more »
NoOneMusic
Guest
NoOneMusic
3 years 6 months ago

how do i get rid of the featured image in the post?

Joe Sapienza
Guest
Joe Sapienza
3 years 6 months ago
Thank you for the tutorial!  I'm having a problem or perhaps it ends up being a question?  I'm very new to this so forgive any lack of protocol!  Since I am altering code, I was under the impression that I should create a CHILD theme from my original, which I did.  Everything is working OK and when I use the editor, I only see styles.css and functions.php.  I think this is well and good.  The free theme I'm using did not have the Featured Image option on pages/posts, but it does have an option to place a Featured Image in… Read more »
Alexik09
Guest
Alexik09
3 years 8 months ago

Hello. how do you add an image in the header of the site? And where soud that image be located in my folders for it to be able to appear on the site?

Caduzeus
Guest
Caduzeus
2 years 11 months ago
+Herman Jager I assume that you have already got an answer, since you posted your message some 4 weeks ago, but here are the instructions if someone else has faced the same issue:1. Upload an image you want to WordPress, click it and use the URL provided in the right-hand side below the image properties.2. Then just add it to the header.php file with an <img> tag. If you want to add a logo, put it before the main h1-title and give it a class of "logo". You can also make it a link to your homepage with the same… Read more »
Herman Jager
Guest
Herman Jager
3 years 1 day ago

+Alexik09 Hi there, I have got the exact same question. Since there have been past seven month: do you have an answer already?

Samantha Fowler
Guest
Samantha Fowler
3 years 8 months ago

7:08 ..irregardless….my favorite word. Great tutorials though! :):)

Mike Krier
Guest
Mike Krier
2 years 7 months ago

+LearnWebCode I caught that too. Your entire tutorial series is ruined now. LOL. BTW you could also swap in for "irrespective" instead.

Jaguar Paw
Guest
Jaguar Paw
2 years 9 months ago

Irregardless of what you say. I will not step away.

Alex Alonso
Guest
Alex Alonso
2 years 9 months ago

+John Wick step away from Samantha, you monster! Great tutorial =D

Darryl de Jesus
Guest
Darryl de Jesus
3 years 21 days ago

+Samantha Fowler That kinda distract me a little too… but yeah still a great tutorial. 😀

Jaguar Paw
Guest
Jaguar Paw
3 years 7 months ago

Samantha you're beautiful.

wpDiscuz