WordPress Featured Image Tutorial
ฝัง
- เผยแพร่เมื่อ 5 ก.ย. 2024
- Join my 2024 Complete WordPress Course here learnwebcode.t...
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.
To view a complete list of the WordPress lessons in sequential order visit:
learnwebcode.co...
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):
learnwebcode.co...
Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at learnwebcode.com/
Follow me on Twitter for updates and cat pics:
/ learnwebcode
This is the easiest tutorial I have stumbled on so far.
It is so clear and explicit.
Thank you very much, it really helped me.
Man, you don't know how grateful I am right now! THANK YOU SO MUCH!!!
If anyone is still wondering this content is VERY much still relevant couldn't find a good tutorial for featured image sizes and kept wondering why they were displaying so GIGANTIC on my blog listing page! Thanks a ton!
Who can dislike this videos? this guy is an amazing teacher!
@Satyaki Mallick 37 now
thats it. hands down. the best CMS software i have ever seen. I'm completely sold after 10 videos
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...
Great!! Please generate more tutorials, there are so many addicted ones like me....
yours is perfect. These are going to takes loads of ti off the learning process.
Lesson Eight, and I've followed each one with consummate ease: this set of tutorials is without a doubt the best I've ever watched, seen and have been a part of.
YES! - Its old, but watching the birds come home to roost has been a most rewarding experience; the cats not happy, but when are cats ever really happy.
When being fed of course .. and my kids are happy cats.
You can also be happy by watching this guys work: he's one heck of a brilliant teacher.
7:08 ..irregardless....my favorite word. Great tutorials though! :):)
Samantha Fowler Good catch :) I should make a tutorial on how to create a WordPress plugin that catches any instances of "irregardless" in posts or pages and automatically swaps in "regardless."
Samantha you're beautiful.
Samantha Fowler That kinda distract me a little too... but yeah still a great tutorial. :D
Irregardless of what you say. I will not step away.
+LearnWebCode I caught that too. Your entire tutorial series is ruined now. LOL. BTW you could also swap in for "irrespective" instead.
These are the best WP tutorial I have seen --- very easy to understand, logical and clear progression of processes.
You are very good at this. Very clear and easy to follow and understand EXCEPT (the most important part to me) how to get to the page to put the code in..... How do I access the page to insert the code?
Awesome Tutes Buddy the way you teach is excellent,you break all the possibilities from getting error when you will made a series,you are the favourite one of my WordPress trainer.could you make some tutorial on WordPress plugin develop?hope it will make many buddy helpful.looking more from you............
You never mentioned what false would do for the image. whomp. Though this tutorial really saved me with my project. Re-uploading the image after making the adjustments is KEY. Thanks again!
I watched these videos for a while and I thought to myself...what great, concise, clear english tutorial this guy's has, he should take up teaching.... Later I saw your web info stating...a teacher ...Duh
Great work and I probably watch all of features for sure!
tNice tutorials is how an editing software beginner tutorial is done. tNice tutorials video is a standard for all editing software tutorials
Youre great at teaching people!
You are a life saver! Kudos to you! You rock!!
Started from your first tutorial and at this point I'm subbing. At first glance making your own word press theme is a mess compared to just normal html + css.
Thanks :)
thanks, it actually let me through so i could download it.
Thank you, I do not speak English, but I understand because of good teaching.
Brilliant. Thank you. I learned lots and you made it very easy to follow.
the best helpful tutorial for beginner
Thanks for the video, very helpful and well explained. Off to make so soft
I’m new to this, and you just mentioned “lets head over to the code”... but didn’t show me how? Simple thing I’m sure, but not easily evident. Thanks.
I just found your videos yesterday and I must say you're doing a great job explaining this. I used to follow a text guide for doing this but the author left some part unexplained or explained them in such a manner you couldn't really understand. These tutorials are spot on and I understand every bit. At the same time you're keeping them lifht and informative. Here take my sub! :)
Ще ббшю
Exactly what I was looking for. Great tut!
excellent tutorials, good sir.
aah, i just got into making soft rn and tNice tutorials is so helpful and your voice is so sootNice tutorialng btw! thanks for tNice tutorials tutorial
'featured image support':
N.B. use the right term; it is 'post-thumbnails', NOT 'post_thumbnails'(no underscore). My mistake; costed me frustration and about half an hour to find this out.
Ad Rienks
Great Tutorial and great Serie, i just wanted to know if it is possible if you show us how to create a slide show in wordpress from scratch without using a plugin
The code below set's up a default image, which is placed inside your theme folder inside a folder named images, you can change the "defolt-thumbnail.jpg" to whatever you want.
Must be inside a loop.
how to add a secondary featured image? thanks for the tutorials!
Hey Alessio did you find out ? trying to do this also
Try to see soft design , composing and setuping as three seperate tNice tutorialngs to focus on and it might will make more sense
wow thank you, now i can have fun!
That's a great video.
I am currently working on a theme that places the featured image at the top of the post , I would like to know what I could do to position the featured image after a paragraph?
Shortcode or some other way
This Tutorial help me learn feature images in WP Thanks a million for this
this is the best toturial
You saved my life.
great tutorials thank you so much God bless you
Awesome tutorial and teacher
Thanks Alot Michael! tNice tutorials is a great video, I've been looking for an alternative to Logic pro x for a wNice tutorialle now because logic pro x and apple
Great video, thanks. How do you wrap the featured image with an external url that when clicked on would take the viewer to another url?
really directional tutorials...keep it up
Since Getty Images is so strict about copyright but allows their new embed feature for images, is there a way to set an embed code as the featured image? Hopefully you know how, this would be amazing!
Thank you so much bro. Sending virtual hugs. Worked like a charm ;-)
Nice sir, your overall videos are helpfull for us
I love the video!!! Somehow I got lost when searching the index.php file...anyone can help me? Really appreciate it.
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
Thank you very much sir....... Great job.
Thanks for your awesome tutorial. Hey It has been a year we haven't seen your new video. Are you okay?
how would I do conditional logic to have a banner be max width: 100% and otherwise 50%?
Hi
can you explain another video same content
But in Google search engine site link thumbnail
I hv no words to thank you for providing us this fantastic and worthy tutorial... Thumbs up fr you :)
I started making soft recently, I was wondering if you wanna do any features.
Good video and detailed tutorial, thx.
Thank you so much again! This is exactly what I have always wanted to know how to do! :D
You don't need all that complicated code to make the text pop away from the image. Do float-left on the div around the post thumbnail and add padding. It's as simple as that. Happy coding.
Hello,
I was lost as soon as you said opening the code? Where do I go to do that? My featured image has my head and feet cut off. I want to make it fit banner size I think because the featured image space that is there is a long rectangle...
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?
Brother, you are good
So much Hard work 🔥🔥
I have a question about the featured image. Many authority sites disable the featured image (All of the featured images are big in size), but why do they keep the featured image disable? Please, I hope your ans.
Thanks!! Would you make one page wordpress theme development also.
hmmm...loving @learnwebcode, but for this tutorial, wordpress isn't giving me different image sizes.
Do I need the 'after_theme_setup' if I am building a completely new theme?
Here's my code:
function custom_theme_setup() {
// Navigation Menus
register_nav_menus(array(
'primary' => __('Primary Menu'),
'footer' => __('Footer Menu'),
));
// Add featured image support
add_theme_support('post-thumbnails');
add_image_size('small-thumbnail', 180, 120, true);
add_image_size('banner-image', 920, 210, true);
}
add_action('after_setup_theme', 'custom_theme_setup');
What about importing midi files because most midis freezes my program. What can I do about it? I'm using soft soft Bundle Pack by
Amazing is the word!
I received an error "Unable to create directory wp-content/uploads" when trying to upload a picture for the featured image. After much Googling was told to change upload path on Settings -> Media page (upload path wasn't showing). Answers also showed trying to use some combination of chmod or chown on certain folder. Neither worked for me. I'm using XAMPP on Mac and was able to solve this by right click on wp-content folder -> get info -> and under Sharing & Permissions give everyone read & write access. Hopefully this helps someone.
Thank you so much!
If you are using linux/apache combo you can solve this by making the user 'www-data' the owner of wp-content recursively, you can google out the commands if needed. Even if you are not following on a linux machine you may be running apache/linux at some stage in a production server and this is definitely a safer option for production environments. Obviously the above is still a good solution for local environments, just thought I'd add this for future reference or for anyone following along with linux
Is there a way to associate that image with the blog post it is featured on? This way, when a Google search returns this image and is clicked on then it will take you to the post it is featured on. I seem to be getting the image returned as an attachment page and is NOT associated with the post at all. Thanks.
sir help me ----- how to set wordpress featured image from url
Thank You.
I have this one big question that comes in my mind.
Should I use pictures that are already uploaded on internet, or I should upload my pictures which I will use in my posts ?
And which one of this two methods would work for faster loading website ?
Thanks.
uploading pictures takes up space on your database whereas linking takes up none. The problem with that though is if those external images are changed or there's a problem on that other host server, then that will affect your posts. If space is an issue and is slowing down your site then linking them might be a good option, but I prefer to upload them. Also the size of the image will affect the loading regardless of whether its on the database or from the internet, so its important to try and use the smallest images while still keeping the resolution quality.
Im not a super expert or anything this is just from my experience :)
Thanks, I share and appreciate your opinion :)
Is the featured image the same as "snippet image"? Could you explain what a snippet image is and how they could be added to our posts?? Please!
insert working good too. ;-)
One problem is that you are using the same image for wide crop (banner) and thumbnail, when it would be more optimal to have two differently cropped images made specifically for the thumbnail and banner.
I think that is not very optimal and more difficult to program, because then you are working with different images and there can be only one featured image, unless you code it otherwise. And it takes more space on the hard drive if you use 2 images.
great bro. thanks
wanting. The idea was to get a midi keyboard and use the softs programd into soft soft, however, if I can't find tNice tutorials core soft, I
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?
If someone can't figure out why the banner doesn't take all the width, ensure yourself it's more than 920px width originally.
hello, i am facing some problem with image. I cant insert images into a post, image is uploaded to media library but cant inserted into post or as featured images. If i switched to text mode from visual mode and check link image path is there but inside final post no image is appear. How to fixed it? Please help really got a problem is there any plugin to fixed it?
vc é o melhor, your are amazing, thank you
how do you change the Learning wordpress for a log on the top left?
Is there a way to set the featured image as a background image of the whole page?
Really amazing Tutorial go ahead man Thanks you are great
Hi,
I have the following problem listed below.
When I select a photo to integrate in my post as a featured image, it displays ok within the home page and also in my post page however when i try to edit my image like cropping/rotating/mirroring etc. the image is not shown. The link of the image is broken it appears.
Could you advise, please ?
Dude, awesome tutorial! Very helpful.
Thank you .....u helped me bro
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 the Header Image - found in the Theme "customizing" section. There, it even allows for multiple images to be randomly displayed as the Header Image. I did this - so far so good. I then wanted to leave the random image ability on the home page (a POST page), but specific images for all the other PAGES (no other POSTs in my design but I wanted a specific image to be displayed on each PAGE). That's why I wanted to add the Featured Image option, which you CLEARLY explained here. I was able to follow and produce the Featured Image module on my edit PAGE! Yay! I used the module and picked the desired image from my library and I see the resulting picture in the module box on the edit PAGE. Yay again! However, when I save and preview, the the random Header Image is still there, but not the Featured Image I just selected. In case this only was supposed to work in POSTs, I created a new POST and used the Featured Image module again as I did for the PAGE Again, the selected picture shows in the module on the edit page, but nothing in the POST. (the random Header Image is still there, though..) So that's the problem. The question is: do those two types of images conflict with each other? (I wouldn't think so, but....?) Another question would be: Should I have edited the Parent styles.css and functions.php instead? I believe I followed your instructions to the letter up to this point so I'm perplexed why I don't get the Featured Image. Thank you so much for your time and knowledge!
There's plugin called Regenerate Thumbnails
When did you create 'single.php'? And what is the content of it? Is it the same as in index.php?
Its-me92 That's a great question. I may have accidentally created "single.php" off camera in-between lessons. When in doubt, you can usually duplicate our "index.php" file from this series, rename it appropriately and make subtle adjustments. In this case, for "single.php" I'm including the code for alternate sized images and I'd also suggest making "the_title" of the post not be wrapped in a link.
Thank you so much! :)
how can i style the post thumbnail? i want thumbnails to be rounded. i tried to add class to them and did css, but nothing happened. what should i do?
Question for you. When I am editing the featured image (Where you manually cropped your image) What if it the option to save isnt displayed? I can outline the portion of the image I'd like to display, but the save option isnt highlighted. Hope that made sense. Also, how do you get to the code menu? The php area?
+Lauren Gardner click the crop button again then the save option will be highlighted hope these helps
coz you did great work on the video, thank u for your help o7
Can you help me ? How featured image converted to banner image in single.php
I'd like to add a second featured image. Is that possible?
I have made changes in all php files as you suggested but changes are not getting reflected in my posts.Please help me
-_- You should make a video about overcoming opinions of yourself...What I mean is when I sit here and say "i'll never be as good as this guy, i'll never find a job doing this.", I know I can do it, i just don't and i'm not sure why. I want to be a web developer and i'm in school for IT - DBA, but I just have zero motivation. Sometimes I'll have a ton of motivation and work on something for a whole week no sleep..Then other days I am sitting here like, what good did that just do me...? I feel a little better just kind of getting that off my chest. The overwhelming feeling of being mediocre.
Hi Nick, I think that's a good idea for a video. Something that I think 99.9% of developers struggle with is "imposter syndrome." We feel like everyone else is a genius and knows everything and we are just faking it. I have a friend who is a CTO for a successful startup and even he talks about imposter syndrome quite often. I think it's because our profession is so tied to the internet - we think because everything is openly available on Google there's no excuse for us to not know everything under the sun... but that's crazy, haha, devs are humans and we're too hard on ourselves. I don't have any advice other than to say you're not alone - most of the developers in the world are right there with you :)
LearnWebCode This, actually made me feel better. I have to Google so much. Not so much html/css, but programming languages... The main thought in my mind is "what if i'm on the job, and they're wondering why i'm Googling things all the time." Since I don't remember or forget. I might sit down and make a video regarding this, but i wanted someones opinion. Appreciate your work.
The best way to break that ice is have yourself work for someone rather than doing things on your own. Volunteer as a web developer - work for a non-profit. You will work to prove yourself as well as gain references, portfolio and experience. There are tons of company looking for volunteer who can do web development.
gmusashi45 Thanks, i actually decided to suck it up and apply for work even though my experience is little and i'm not graduated yet. With my portfolio, resume and cover letter I was able to get a job as a web developer quickly. It took about a month of applying but I landed a job at 40k a year. Much better than my 9k a year at part time retail.
i'd look forward to a video like this (now that this post is a month old I guess it might exist but I dont know). I am in need of a career change and have no formal education in any sort of programming, but this is something I think I am capable of. The issue is that, besides the impostor syndrome, no one really takes me seriously, in much of anything so theres also the aspect of "why bother when it probably wont matter". Anyway, just trying to find a good starting point and some way to prove myself is seemingly intangible at the moment.
EDIT: also, for some reason I needed add_theme_support( 'post-thumbnails' , array('post')); to make the featured images options show rather than your exact code. dont know why I needed a second argument.
The conditional logic I have works:
It should add the class only to posts that have a thumbnail/featured image. Mind you, it is not adding the class just to the first post!
You are an amazing, wonderful and so so lovely teacher
Thanks for the tutorial
Thank you !! you are a great teacher ! Everything is well explained !!