For an obvious example, check out the MakeUseOf homepage, where the featured image is used to make an otherwise dull list really pop out. Not only does this obviously improve the aesthetics of your blog, it also makes it more likely that readers will pay attention to the content. Visual cues are always better.
Today I’d like to show you how to use featured images in your WordPress blog. I’ll show you how to add and assign the image to your post as well as the code you’ll need to integrate them into your theme.
Setting Featured Images
If your theme supports it, you should see a Featured Image option on your post edit screen.
Click that to open the usual file upload pop-up, but instead of clicking Insert into Post, select Use As Featured Image instead.
Close the pop-up and you should now see your featured image added to the sidebar to indicate you were successful.
Don’t worry about the size for now, we can adjust that later through the WordPress options.
No Featured Image Button?
If you don’t see the link in your sidebar, it’s quite likely your theme doesn’t support them. No worries, we can fix that. You’ll need to log into FTP – or use the built-in WordPress file manager if your folder permissions allows you to – and locate your theme folder. This will be in the wp-content/themes/yourtheme, where yourtheme is the name of the theme you are using. Open that up and take a look at the files in there.
Look for the file called functions.php and open it up in your favourite text editor. Scroll to the end of the file, and just before the closing ?>, add the following line:
Remember, make sure you do this just before or on the line before the closing PHP tag. So the end of your file should now look something like:
Refresh the post edit screen and you should be able to now set a featured image.
What About All My Previous Posts? Do I Have To Edit Them All Again?
No. There’s a handy plugin called Generate Thumbnails that can handle the tedium of setting featured thumbnails on old posts really easily. After you’ve installed, just find the new link on your Tools menu and click the button to set the images. Obviously, if you don’t have images on your posts in the first place, you can’t automatically set any.
Add The Thumbnail To Your Theme:
I’ll be using my newest blog Self Sufficiency Guide to demonstrate, so head on over there to see the results – using a theme called Nature_wdl which you can download here. By default it doesn’t support any kind of post thumbnails, so I’ve had to first edit the functions.php to include that line. The basic design of the homepage is fine, but I’d like it to show just a list of articles with a featured thumbnail next to them, instead of the entire post content.
If you followed my WordPress tutorial last week, I showed you how the basic theme structure works. Since there’s neither a home.php nor front-page.php for this theme, the front page will be handled by index.php, so let’s open it up and take a look:
Luckily, this theme is really well coded, so adjusting it should be no problem. Before adding the thumbnail, I want to make sure only a small excerpt of the post is being shown, instead of the entire post content. Find the line that says:
On a different theme, it may just say the_content(). Simply replace it with:
Now if you reload, you’ll see that only a short paragraph snippet is shown, rather than the entire content.
Next, to add the thumbnail, let’s just see what happens if we just add in a single line directly above, like so:
It’s a little ugly, but straight away with just one line of code we’ve added the associated image to the homepage! Fantastic! To make it a little more attractive, let’s try floating the image to the left, and cutting it down to the default thumbnail size like this:
The syntax is a little complicated in there, but you should be able to see where you can insert your own CSS if you wish. For instance, to add a right margin:
I’d say that’s pretty impressive for 30 minutes work!
Adjusting the Thumbnail Size:
You may find the default size of 150×150 is a little too big for your site. To adjust this, enter your WordPress admin and find Settings -> Media on the left hand side. Here you can change the size of your thumbnails. A word of warning though: this will only change future uploads, not your existing images, so don’t be surprised when nothing happens. There is however a helpful plugin called Regenerate Thumbnails which can automatically run through all your existing images and size them up right.
I hope this shows you just how incredibly flexible the WordPress system is and how you can easily adjust a theme code without any experience of PHP programming. In times past, adding this kind of functionality could have taken days. The best way to learn is to experiment though, so be sure to read up on the codex and stay tuned, as next time I’ll show you how to make your own widget for the sidebar that highlights a random post using its featured image. Stay tuned!