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

How To Show Featured Images in your WordPress Posts

| 54 Comments

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?

Categories: Code & Snippets, The Basics | Permalink

What next?

Hire me

If you couldn't quite manage this yourself, find it too intimidating, or just don't have the time to do it, you can always hire Dave to do it. Please get in touch so that we can discuss your needs.

Leave a comment

If you have a question, update, or comment about the tutorial, please leave a comment. I try and respond to every comment, though it may take a few days, so please check back soon.

Let a WordPress Expert help you

Do you want to try this, but feel like you need a helping hand, in case something goes wrong? My service, The WP Butler, gives you access to WordPress expertise whenever you need it. Better yet, I'll keep your site backed up, updated and secure, so that you don't have to worry about it. It's all part of the service. Use coupon DIWW and save 15% on all plans.

Visit The WP Butler

Author:

Dave has been tinkering with WordPress for many years, and he now shares his WordPress knowledge here on Do It WIth WordPress to help others realise its impressive power. He can also be hired to help with your WordPress needs. Dave, who is British, is married to his best friend, Marti, with whom he has a beautiful daughter, Ellie. When he's not dabbling with WordPress, he's probably eating Triscuits or hummus, watching an indie film or British TV show, spending time with friends or family, or exploring the world.

54 Comments

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

    Thanks, and retweeted.

  2. Amazing post and so detailed.

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

    Good job!

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

  4. 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

    • 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. 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

    • 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. 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.

    • 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. 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*

    • 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. Hi dave! any screenshots of before and after using the code would have been great.

  9. 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

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

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

  12. 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”?

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

      • 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

  14. 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!

  15. 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?

    • 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.

      • 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. 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 !

    • 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.

      • 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. 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

    • 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. 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!

    • 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. 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. 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!

    • 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. 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!

    • 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.

      • 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.

        • 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

    • 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. 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?

Leave a Reply