How To Show Featured Images in your WordPress Posts

Images are a great way of including some color into your posts

Featured images are a great way to automatically include some color in your post, which is a great way of dressing them up, provided it is done right. Until WordPress 3.0 came out, it was a little more difficult to include these. It’s now a native feature in WordPress 3.0+ though and this tutorial walks you through how to implement them.

Add the function

If you have a functionality plugin, pull it up in the plugin editor. If you don’t have one, load up functions.php in your theme editor. At the very bottom of the file, add the following code snippet, which adds the functionality for featured images:

Display the image in your post

Now that you’ve added the capability, you just need to tell WordPress where to load the image and how to display it.

Using the theme editor, load up single.php and find the line that looks like the following. This is the line that displays the post content:

In this tutorial, I’m going to assume you want to show the thumbnail at the top of the page, with the content wrapped around it. In order to do so, we want to add the featured image code in before the content call.

Paste the following code ahead of the line of code above:

Set how the image will appear

You can either use one of your three preset thumbnail sizes (as set in Settings > Media) for your featured image, or you can dictate a new size altogether. You’ll change the thumbnail call according to which size you want it:

For the custom size, replace width and height with the number of pixels that each length should be. For example, to show an image 250 pixels wide and 150 pixels high, use:

Now it’s time to style the image with a little CSS. I’m going to show you one way to do it, but you’ll need to tailor the styling to your specific theme, so that it fits in. If you need some help with this, leave me a comment and I’ll be glad to help.

This will be a little different for everyone, but my post content was given a set CSS selector (entry-content). Since I’ve included my featured image call inside that CSS class, I’m going to use a specific CSS ID for the post thumbnail. Before I added my featured image code, my post content call looked like this:

Now, I’ve added an ID for the post thumbnail and the code in my single.php looks like this:

Now we need to specify what CSS rule set will be applied to the image. Load up your stylesheet (style.css) in your theme editor. Find the CSS class that is set for your post content (entry-content in my case) and scroll down to the end of that section (until there are no more rule sets that start with entry-content). Now you’re going to add the following rule set right after it:

This will display your image in the top right of your content, put a 1 pixel black border around it and give you a 10px margin below it and to the left of it, so that the content doesn’t butt right up to the edge of the image.

Captions too?

If you also want to display the image caption below the image, say for crediting the photographer where a Creative Commons image is used, use the following code in single.php instead:

So did you get it to work? How does it look? Are you taking your blog to the next level?

54 thoughts on “How To Show Featured Images in your WordPress Posts”

  1. Tristan says:

    Wow, nicely done, Dave. Great tutorial. I’ll probably end up using this on some of my blogs.

    Thanks, and retweeted.

    1. Dave says:

      Thanks Tristan. Always nice to hear that my content is actually of use!

      Really appreciate the tweet. Take care mate

  2. Kimi says:

    Amazing post and so detailed.

    I also have similar post, but not so detailed as yours, Dave.

    Good job!

    1. Dave says:

      Thanks Kimi. I strive to be as detailed as possible to cater to all skill levels.

      Thanks for your comment, as always.

  3. Fernando says:

    Nice Dave! I think I will try it out to check how it actually looks :)

    1. Dave says:

      Thanks Fernando. I hope it works out for you. Have you tried it yet? How does it look?

  4. infoomatic says:

    Hi Dave, just wondering if/when we’ve that code implemented
    in our WP theme, will each of my new post has thumbnail image
    displayed or we have to set it as featured image during upload..
    thanks for sharing the trick

    1. Dave says:

      Hi there,

      When you use this feature, it requires each post to be assigned an individual featured image, so when creating the post you either need to use an existing image and set it as the featured image, or upload a new one.

      If you want it to be the same image for each post, you would change the code you put in single.php to some simple HTML markup with an tag.

      Hope that helps

  5. Unknown says:

    I have been looking for a step by step to add images to my almost up blog. Thank you for the easy to follow step by step. Really simple to follow and helpful. Thank you so much

    1. Dave says:

      Thanks so much. Was the featured images application what you were looking for, or were you just trying to upload photos to posts? Did you get it working?

  6. That Guy says:

    I got the featured image to work on a customized twenty ten theme I am manipulating. However, the thumbnail shows up in the content and also replaces the header image. Any work around for that?

    I am trying to display a 940×200 image just above my content below the menu. Thanks.

    1. Dave says:

      Hmmm, unless the header image has the same markup as the featured image, I can’t think why it would show up in both places. Do you know what markup is being used to display the header image?

      P.S. Really like the design of your Wisdom Graphics site. Looks great! Did you design that yourself or buy it?

  7. Stefan says:

    Thanks Dave!

    I have been looking for hours in order to solve this and you had the solutiona. Exillent! Thanks a bunch.

    *Waving way back from Sweden*

    1. Dave says:

      Hi Stefan,

      I’m glad you were both able to find me and to then get the right answer here.

      I went to Sweden once and I loved it! I wanted to move there. One of these days…

  8. blogsew says:

    Hi dave! any screenshots of before and after using the code would have been great.

    1. Dave says:

      Hi,

      Do you mean screenshots of the front end, or screenshots of the single.php code?

  9. Super Glue says:

    Hi Dave, just wondering if/when we’ve that code implemented
    in our WP theme, will each of my new post has thumbnail image
    displayed or we have to set it as featured image during upload..
    thanks for sharing the trick

    1. When you put it in your theme, that tells WordPress to look for the featured thumbnail. You still have to tell it what that image is.

  10. Is there an easy way to have the featured image be a link to the post?

    1. Of course. Just put a link to < ?php the_permalink(); ?> on the image.

  11. hls says:

    Thanks for this! I’ve been looking for a solution like everywhere! Implemented this in a few of my websites. Thanks again!

    1. You’re quite welcome. Any time!

  12. Browser GameGeek says:

    Hi Dave,

    I would like to ask if these instructions can also apply if I would want to “Display the thumbnail,title and excerpt of Child pages on Parent pages”?

    1. No. Besides, why would you want the thumbnail of child pages on the parent page? What if there was more than one child page?

      1. Browser GameGeek says:

        I would like to put the thumbnail of child pages on the parent pages so that the parent pages would look and act the same as categories’ pages. Its like the parent pages will be the table of contents in which the contents are of the child pages summary/thumbnail,excerpt and the “read more” block. One free wordpress theme that has implemented this is Graphene Theme, however, I have another theme that suits my purpose more efficiently.

        The child pages would be listed one by one on the parent pages.

        Anyways thanks for the reply :D

  13. Hi Dave,
    Thanks for the post. I’ve been gradually changing my site from the original theme and have been wanting to put in thumbnails in the post listings for some time. Thanks for a quick and detailed post that made it really simple to achieve.

    Matt

    1. Did you manage to get the result you were hoping for? I hope you did and that it looks as you intended.

      1. Dave,

        yep, – it looks absolutely fab.

        Matt

  14. Michael M says:

    Hi! Great tutorial by the way. I was wondering, is there any way to post the featured image without having a width and height specified? I may have skipped the answer, but for example, I don’t want any images to have a specific width or height like the small, medium, large, full sizes give a specific pixel value, I just want to use css to give my images a max width so the images will scale accordingly if that makes sense. I am currently designing a portfolio site for a friend. Thanks!

    1. Yes, if you use one of the preset values, you can make sure that they’re set up to only allow a maximum height or width. You can also make sure that WordPress doesn’t hard crop the image (or does if that’s the desired action) so that the whole image is shown as it was uploaded, rather than being cropped.

      1. Michael M says:

        How would I do that?

        1. Michael M says:

          Sorry, I think I just figured it out, SETTINGS> MEDIA right?

          1. Hi again. Yes, that’s correct. Set the media sizes in Settings > Media

  15. Stefan says:

    Hi, excellent post, but I really sucks on php and scripts and Im wondering if you have any idea for my problem.
    It´s a reciepe blog and my thought is that I will assign a featured image for every receipt, and it shows up fine in searches and so on, but when I click on post my theme don´t show the featured image, when I use your code the image will appear two times in the searches etc, one as the featured post and on in the excerpt, is there any way to block the image to show in the excerpt?
    Example with a working feature image at the top, no image in the post…http://en.kantarellrecept.se/recept/soppa/

    Thanks in advance and hope you understand what I´m after?

    1. Hi Stefan,

      I understand what you’re saying, but I just visited your site and it appears as though everything is appearing correctly. One featured image in the archives and one featured image on each post. Is that now what you intended? It’s highly likely that you’ve already fixed it now. Let me know if there’s still something that you need.

      1. Stefan says:

        Thanks, but I did it the hard way and attached both a featured image and a standard image in the post. Maybe I will give it a try again, but not now Im done.
        Another thing that I have problems with is a skyscraper ad to the right floatning, after the image in the post, is there a code for that:-). Used adsense Deamon that almost did it but I had to choose between float right or place it after the first paragraph. Would like both:-)
        Thanks
        Stefan

  16. Emil says:

    Hi Dave , i am new to php , wordpress and would like to build a blog with a front page in which the last 3 posts (excerpts) are show , each with it’s featured image . I placed your code in index.php and the latest post shows an image as intended but not the other 2 posts.
    Can you tell me what else do i need to add?
    Thanks !

    1. More than likely, the function has not been placed in the loop. Place the function just before the_excerpt() or the_content() to make sure it’s in the loop and will be repeated for each post.

      1. Emil says:

        Thank you for the reply . I did that and managed to have photos for all my excerpts on the front page. I was also wondering how can i make the photos be of different sizes (e.g the latest post-excerpts to have a big image and the next post-excerpt beneath it to have a smaller image ) . I tried with CSS and it did not work …
        Greets

  17. vinit says:

    hi

    i need help. when i am putting the code in function.php it is giving some error.what to do.I am using headway theme

    1. Are you using the correct functions.php file (in your wp-content/headway-xxxx folder)? If you’re using a framework, there may also be a custom functions file, which would be more appropriate.

  18. Deborah says:

    Thanks for the great tutorial – it worked perfectly, except that the image is centred with the text below. How do I get the text in the post to wrap around the image?

    Thanks!

    1. There must be a clearfix acting on the image. If you used the CSS that I provided, the text should wrap around the image, unless there’s a clearfix that’s forcing it beneath the text.

  19. Deborah says:

    You’re right it should have worked, Apparently there was something missing in the theme, but it’s been fixed now after an upgrade so works fine now!

  20. Michael says:

    Hi there… for some reason.. I’m stuck here…

    I’m in single.php and for the life of me, can not find any code similar to

    Has the structure of single.php changed since you first started this tutorial? The only place I’ve been able to successfully put the image is ABOVE everything.. and the calls to resize weren’t successful.

    Thanks!

    1. Michael,

      No, this tutorial should still be very much applicable today. If your blog shows your post content at all (which clearly it has to, otherwise there would be no content on your site), then the_content MUST be in your single.php file, unless it loads it in from another file, like loop-single.php.

  21. Clark says:

    Hi Dave,

    Thanks for the tutorial. I’m new to WordPress, but have been doing HTML with Notepad for years. Anywho; I was wondering, what would I need to do in order to have the image show up on the actual Posts Page? If you go to my web site you will see what I want it to look like as I have already setup the layout in the way I want. However, I have to manually insert the image in the post to have it show up that way. I am looking for something automated that pulls from the Featured Image and puts it there, just as this tutorial does for single.php. Thanks!

    1. You mean to have the image appear in your list of posts, right? On the front page? You would just insert the same function in the appropriate theme file, within the loop. This would likely be index.php.

      1. Clark says:

        Yeah, I figured it out a couple of minutes after I asked you. Sorry :(. However, I was having an issue with the text not wrapping (it would start at the line after the horizontal bottom of the images) and the images not being the correct size that I set them to be with the “” (forget what size they would become, either 150×150 or 200×200, but they would be square).

        My guess is this has to do with the theme not having any other entry-content rule sets? But as I’ve never had this problem before and my HTML knowledge is self-taught, I really have no clue.

        1. It seems as though you’ve fixed this as well. You just need to make sure that the image is floated to the left and the content should wrap around it. You might want to add margins to the right and bottom of the picture to make sure that the text is clearly separated from the image.

  22. Hello,
    I am using the Entry theme for my middle school online newspaper. New to using word press and have muddled my way through the HTML and got the site to look how I want. Now I want my students to be able to create a new post, and insert a picture with a caption into the post, and to be able to use the same picture as the featured image. But it will not display the caption with the featured image in the post, and it puts the picture in there twice. It seems we can either have a featured image without a caption, or no featured image and just insert the picture with the caption into the post. I want to do both – have the featured image, and have the caption with it. Please let me know if you have any ideas how I can get this to work. Thanks, Melissa

    1. With WordPress, you can do just about anything. This included :)

      Find where you put your the_post_thumbnail function, and paste the following after it: echo get_post(get_post_thumbnail_id())->post_excerpt;, as shown in the last paragraph of the tutorial.

      This should be inside PHP tags of course, and you might need to style it a little, but that’s the general idea.

  23. Kelley says:

    Hi Dave,

    Thank you so much for this tutorial! I’ve been messing around with it, trying to get it to look the way I want, and I’m still having trouble. What I really want is for the feature image (thumbnail) to appear above the title of the post, but I can’t seem to get that to work. I think the problem lies somewhere in that it is showing up floating (and even if I specify to float:left, it’s still floating to the right for whatever reason), so it’s not pushing the rest of the content down below it. Any suggestions?

    1. Sounds like you need to be more specific with your CSS selectors. Also, make sure that the featured image call appears BEFORE the_title in single.php

Leave a Reply