Pinterest Stumbleupon Whatsapp
Ads by Google

how to use featured images in wordpressFeatured Images were introduced into WordPress in version 2.9, and it enables you to easily display an image that’s associated with your blog post in various parts of your theme.

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.

how to use featured images in wordpress

Click that to open the usual file upload pop-up, but instead of clicking Insert into Post, select Use As Featured Image instead.

Ads by Google

wordpress featured image

Close the pop-up and you should now see your featured image added to the sidebar to indicate you were successful.

wordpress featured image

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.

wordpress featured image

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:

  add_theme_support('post-thumbnails');

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:

  add_theme_support('post-thumbnails');?>

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.

how to use featured image

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.

how to use featured image

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:


Posted by | Posted in | Posted on

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:

'float:left;'));?>

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:

'float:left;margin-right:10px;'));?>

how to use featured images in wordpress

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!

  1. Root
    July 11, 2011 at 12:48 pm

    I've almost destroyed my WP blog trying to do this! Thx for the awsum post!

    • Tina
      July 11, 2011 at 3:57 pm

      Root,

      were you able to get it to work, though? 
      I hope your WordPress is back to normal!

  2. AndroidFC
    May 14, 2011 at 5:02 pm

     Thankyou very much! A useful tips!

  3. Sietse
    May 14, 2011 at 10:44 am

    cool write-up mate, thanks!

    I actually found this post searching for a Random Featured Image plugin or widget, because I want a random list to appear in the sidebar, just with a linked Featured Image. Got any ideas on how to do that?

    Check out how I have Popular Lists set up in the sidebar, that's how I'd like a single Random list to appear... it's actually very hard! (allyouneedislists.com)

  4. Sietse
    May 14, 2011 at 8:44 am

    cool write-up mate, thanks!

    I actually found this post searching for a Random Featured Image plugin or widget, because I want a random list to appear in the sidebar, just with a linked Featured Image. Got any ideas on how to do that?

    Check out how I have Popular Lists set up in the sidebar, that's how I'd like a single Random list to appear... it's actually very hard! (allyouneedislists.com)

    • James Bruce
      May 14, 2011 at 5:57 pm

       Actually Sietse, I wrote an article about that very topic for the next item in the series, to be published next week. Can you hold on till then? It teaches you how to make your own custom widget, and in the example I give it grabs a random post and displays the featured image. Sounds perfect for what you need, right?

      • Sietse
        May 14, 2011 at 6:35 pm

         excellent, can't wait!

      • Guest
        May 15, 2011 at 8:39 pm

        That post sounds perfect

      • Sietse
        June 2, 2011 at 4:31 am

        Hi James,

        Has the article been published yet? I can't seem to find it.

        Cheers!

        • James Bruce
          June 2, 2011 at 7:17 am

          Yep, it's here: http://www.makeuseof.com/tag/how-to-create-wordpress-widgets/

          By the way, you can always find articles by me from the link in the footer, or you can try the new wordprerss category archives at http://www.makeuseof.com/service/wordpress-tutorials/

Leave a Reply

Your email address will not be published. Required fields are marked *