Sign In  |  Join Now Become a member to add links and start earning points!

Add Thumbnails to WordPress with Custom Fields

In this tutorial, I’ll show you how you can easily add thumbnails, lead image, and other extras to individual posts in WordPress.  These images can be shown on the front page, archives, search pages, etc – but appear outside of the content, giving you full control of their placement and style.

What Are Custom Fields?

If you’re reading through this article, there’s a possibility you’ve never heard of Custom Fields (or maybe you just haven’t seen a use for them yet).  Essentially, all a Custom Field does is allow you to add extra pieces of data to individual WordPress posts that otherwise aren’t there by default.  In other words, along with things like the Post Title, Entry, and Categories, you could add:

  • Thumbnail
  • Lead Image
  • Price (perhaps each of your posts is a product that you need a price label for)
  • Source Link

Sure – but you COULD also just put those in the post… right?

Of course, but when you do that, you’re stuck with your default posting format and styling.  What if you want to have a Thumbnail for your post, but instead of the thumbnail appearing inside of the post entry, you only want that thumbnail to appear on the front page of your blog – and using a completely different style than it would in your entry?

This is where Custom Fields come into play.  They allow you to add as many additional fields as you like, all of which can be used anyway you want to use them.

Adding a Custom Field

The first step to making custom fields work is to actually add one to your WordPress Blog.  To do this, simply start making a New Post, and scroll down the page until you see “Advanced Options“.  Under this heading, you should see something like, Excerpt, Trackback, and Custom Fields.

To add a Custom Field for a Thumbnail, just fill in the Key with “Thumbnail”.  For the Value, post the full URL of the thumbnail you would like to use.

Click Add Custom Field, and it will apply to that post.

Creating Thumbnails for your Posts

Now that you have a key called Thumbnail, you’ll never have to create that key again.  It’s stored so you may select it from the dropdown box for now on.

In each post that you’d like to have a thumbnail, you’ll have to go to the Custom Fields area of your Write Post page, select “Thumbnail”, and fill in a value with the path to the thumbnail you’d like to use.

Now, let’s insert this thumbnail into your post listings on the front page.

In your theme files (I am assuming that you have a basic understanding of modifying themes in WordPress), open up index.phpFind these lines:

<?php while (have_posts()) : the_post(); ?>
...
<?php endwhile; ?>

The code between these lines is the output for each individual entry shown on the front page of your Blog.  So, let’s say you limit your blog to 10 posts per page, this is the code the repeats 10 times to display those 10 posts.

Within these lines, we want to add the following code in order to show our newly created thumbnails:

<img src="<?php echo get_post_meta($post->ID, "Thumbnail", true);?>" />

This outputs an image, using the Value of the Key, Thumbnail, which we’ve inserted into our post.  It can be inserted ANYWHERE within the while loop, allowing you to float it to the left or right of the header and entry, display it above an entry, below, whatever you want.

Great, but I want this to show up In the Individual Post Too

That’s possible as well, using the same code as shown above.  You just need to make sure you insert the code that displays your thumbnail in the while loop.

Maybe you want to display a different image on your post page, such as a larger or smaller version of your thumbnail. At Tutorial9, we often times have Lead Images at the top of our posts which are much larger than our thumbnails.  This is very easy to achieve as well.

On your Write Post page, add another Key to your Custom Fields called “Lead Image“, with a value pointing to the URL of your lead image.

Now, in your single.php theme file, insert the following code inside of the loop:

<img src="<?php echo get_post_meta($post->ID, "Lead Image", true);?>" />

Simple!

Only Show a Thumbnail or Lead Image on Some Posts

Maybe some of your posts don’t require thumbnails or lead images.  We don’t want to output unnecessary code…  With a few additional lines, we can fix this problem.

First off, we’ll want to put this right after the loop starts:

<?php $Thumbnail = get_post_meta($post->ID, 'Thumbnail', $single = true); ?>

This won’t output anything in HTML, but will store the value of our Thumbnail field in a variable called $Thumbnail.  If the field was left empty during the post creation process, this variable will also be empty.

Next, we need to modify our output a bit:

<?php if($Thumbnail !== '') { ?>

<!-- Any special styling you might have for posts with thumbnails... -->

<img src="<?php echo $Thumbnail;?>" />

<?php } ?>

What this does, is checks to see if the Thumbnail variable is empty.  If it isn’t empty, the code will output the thumbnail image.  However, if it is, nothing will be shown here.

After you’re finished modifying your code, upload, and test to make sure thumbnails are being displayed properly.

274 Comments

  1. Add point Subtract point
    Spicytee (2 Points) April 10, 2011 at 9:44 am

    Great tut…
    Could have been what I really need right now.
    But what if my new post doesn’t have advanced opetions. How do I get to set custom field in it..
    I will appreciate a response please

    Thanks

    Flag as inappropriate
  2. Add point Subtract point
    meraj07 (3 Points) March 24, 2011 at 12:39 am

    Thanx for the Tut. But My Text Keeps getting under the Thumb. Any way to put it beside the Thumb?

    Flag as inappropriate
  3. Add point Subtract point
    PompDA (0 Points) March 17, 2011 at 8:24 am

    Sorry. Re-pasted. :\

    <a href="”><img src="ID, “Thumbnail”, true);?>”/>

    Flag as inappropriate
  4. Add point Subtract point
    PompDA (-1 Points) March 17, 2011 at 8:23 am

    This code right before the excerpt code in the loop in pages such as category.php or archive.php will look for a thumbmail, display a thumbnail, and make the thumbnail clickable to the same permalink where the title of the excerpt is linked to–the post/page url. :D

    <a href="”><img src="ID, “Thumbnail”, true);?>”/>

    Flag as inappropriate
  5. Add point Subtract point
    Jeff Freeman (3 Points) March 15, 2011 at 6:37 pm

    Hi there. I am new to this and found your article very useful. I have a question. After I insert the custom field name Thumbnail, and give it a path to the image I want to display. Can I control the size of the image? My images are all different sizes, and I have a restricted size limit on my front page of my free template. Can I control the size in the Value section? How would I do this?

    Thanks!

    Flag as inappropriate
  6. Add point Subtract point
    Sandy (0 Points) March 15, 2011 at 6:30 pm

    Thank you so much for this, I’ve been searching everywhere

    Flag as inappropriate
  7. Add point Subtract point

    Thanks for your post. it really helped me.

    Flag as inappropriate
  8. Add point Subtract point
    Yeu Host (1 Point) January 20, 2011 at 5:44 am

    I just want to show a part of image link as <img src="wp-content/uploads/skins/star.gif” border=0>, but it looks we can’t call custom_fields as a part of image link, right?

    Flag as inappropriate
  9. Add point Subtract point

    Another way of achieving this is given at globinch.com . Read How to Create WordPress Thumbnail Based Post Archives
    http://www.globinch.com/2010/11/01/how-to-create-wordpress-thumbnail-based-post-archives/

    Flag as inappropriate
  10. Add point Subtract point
    Juliet from Tenerife Property (1 Point) December 30, 2010 at 7:11 pm

    Love the wordpress design you are utilizing. I suspect I may well give Agent Press a shot by myself with a completely new real-estate blog. Thank you for the inspiration!

    Flag as inappropriate
  11. Add point Subtract point

    I want to know how can i make custom widgets on
    http://newsxprs.com

    Flag as inappropriate
  12. Add point Subtract point

    yeah! At last i make it..thanks..

    Flag as inappropriate
  13. Add point Subtract point
    dnnbfky (-1 Points) December 29, 2010 at 7:26 pm

    пистолет пневматический umarex beretta eliteii – оружие пневматическое, магазин пневматического оружия, пневматическое оружие куплю, купить пневматическое оружие купить пневматику. Сайт pnevmatika.org

    Flag as inappropriate
  14. Add point Subtract point
    Pummy Manku (0 Points) December 15, 2010 at 2:13 am

    Thanks site admin, you are a life saver :)
    i needed this info for one of my video site :)

    Regards,
    Pummy

    Flag as inappropriate
  15. Add point Subtract point
    simon (-1 Points) December 8, 2010 at 5:42 pm

    how can we display a custom field thumbnail ouside the wordpress site? So on a non blog website.. i am on this for days can someone help me please.

    Flag as inappropriate
  16. Add point Subtract point

    can you pls combine it with a center alligment command?

    Flag as inappropriate
  17. Add point Subtract point

    Really helpful article. Other tutorials had pieces of code that just wouldn’t work. This did! Thanks!

    Flag as inappropriate
  18. Add point Subtract point

    Im using featured image option in my theme can i use Custom field to give URL to that image.

    Flag as inappropriate
  19. Add point Subtract point
    myshadowself (0 Points) November 13, 2010 at 7:06 am

    Oh thank God there’s an easy solution!
    Thanks for the tips, been wracking my brains for days on how to add thumbnails to posts. Lo and Behold, there’s already a system to do it.

    Flag as inappropriate
  20. Add point Subtract point
    Paul Welding (0 Points) November 9, 2010 at 8:42 pm

    How would I get this Thumbnail image to show in the summary when viewing an archive list of posts?

    Flag as inappropriate
  21. Add point Subtract point

    It worked perfectly! Thanks for sharing this!!

    Flag as inappropriate
  22. Add point Subtract point
    Fort Collins Web Design (0 Points) October 30, 2010 at 5:47 pm

    “ID, “Lead Image”, true);?>” That is EXACTLY what I was looking for. Simple & Easy. Thank you for the great toot. BTW, I like the layout of your website. :)

    Flag as inappropriate
  23. Add point Subtract point
    Team Roster (1 Point) October 29, 2010 at 9:16 pm

    Best you could make changes to the blog name title Add Thumbnails to WordPress with Custom Fields | Tutorial9 to more catching for your webpage you write. I loved the post all the same.

    Flag as inappropriate
  24. Add point Subtract point
    Hearing Aid Reviews (0 Points) October 29, 2010 at 4:26 am

    clear and concise

    Thank you very much…

    Flag as inappropriate
  25. Add point Subtract point
    Steve John (0 Points) October 15, 2010 at 2:40 am

    HI,

    Anybody can help me ?

    Please tell me who can i show diffrent custom field in diffrent Pages in Post in WP Admin so admin only can view only which custom fields which are difind for a Particular template page or template post page.

    I m looking for a positive ans. Please help me

    Thanks Sachin

    Flag as inappropriate
  26. Add point Subtract point

    Great stuff … thank you for your help.

    Flag as inappropriate
  27. Add point Subtract point

    Thanks for this, but my theme already supports thumbnails, all i need to know is what to enter in custom fields text boxes for those thumbnails to show up?

    Flag as inappropriate
  28. Add point Subtract point

    Thank for this, i have been looking everywhere for this solution.
    i found some other tutorials on customising my category posts but couldnt get them to work properly, but your worked a treat, thanks again.

    Flag as inappropriate
  29. Add point Subtract point

    Thank you thank you thank you! Just what I needed!

    Flag as inappropriate
  30. Add point Subtract point
    Watch Live Tv (2 Points) September 28, 2010 at 2:43 am

    That’s really a good way to show the image in wordspress post and there is no need to put any plugin as well

    Flag as inappropriate
  31. Add point Subtract point
    flash oyun (1 Point) September 27, 2010 at 10:13 pm

    thanks alot.. straight to the point, no thrills and it worked a treat. Perfect!

    Flag as inappropriate
  32. Add point Subtract point

    thanks alot.. straight to the point, no thrills and it worked a treat. Perfect!

    Flag as inappropriate
  33. Add point Subtract point
    torrent download (2 Points) September 26, 2010 at 8:52 am

    Cool! This tutorial was quite easy to follow. Thank’s alot.

    Flag as inappropriate
  34. Add point Subtract point
    besttop10reviews (2 Points) September 25, 2010 at 5:51 am

    Thank you, this tutorial work best with my theme.

    I just replaced code in my own theme with your code to show thumbnail in my homepage.

    Flag as inappropriate
  35. Add point Subtract point

    Hi

    Just reading through your post, I am using get_post_meta with a custom field to create a series of thumbnails on my homepage which link to their respective pages, this is all fine however i need that thumbnail list to appear on the post pages as well, the problem I have is that it only displays the thumbnail from that post – any ideas on how to get around this?

    Site is here http://jupiter.servers.rbl-mer.misp.co.uk/~thebrigh/

    Thanks in advance

    Neil

    Flag as inappropriate
  36. Add point Subtract point
    Resim Paylas (1 Point) September 21, 2010 at 4:02 am

    I like to post this comment .It helps a lot.The one thing I do know for sure, if that day comes, is that when it’s wedding cake cutting time, I will NOT make the same mistake I witness at every wedding. I will not be serving Champagne with dessert, but rather the slightly sweet and fizzy dessert wine,..

    Thanks and Regards

    Flag as inappropriate
  37. Add point Subtract point
    business (1 Point) September 9, 2010 at 8:48 am

    Thanks for the tutorial ….
    Now, i can use slide show in my blog

    Flag as inappropriate
  38. Add point Subtract point

    excellent stuff man…very usefull for a full time blogger like myself….keep it coming bro…cheers

    Flag as inappropriate
  39. Add point Subtract point

    it’s perfect for me when timthumb.php is not working… thank u so much. :)

    Flag as inappropriate
  40. Add point Subtract point
    jobvacancy (1 Point) August 12, 2010 at 12:10 am

    thank you for the information,
    This was helped,
    spirit! ! ! ! !

    Flag as inappropriate
  41. Add point Subtract point
    netmild.com (2 Points) August 6, 2010 at 6:37 am

    thank you its work for me..I’ve placed the code diatantara permalink

    Flag as inappropriate
  42. Add point Subtract point
    Kieran (1 Point) July 28, 2010 at 4:40 am

    Thanks for this. I have a question though, which may just be a shortcoming of custom fields in general.

    Is there a way of changing the input field for custom fields. The current method is still pretty awkward for non-technical users to use. For example, could the above custom field value be changed to an file upload input, or a textarea?

    Flag as inappropriate
  43. Add point Subtract point
    suvosaha (1 Point) July 21, 2010 at 2:19 pm

    I’m developing a new website where i don’t want to apply some big sized theme but i want to use thumbnails. your this post solve my problem. Thanks a lot.

    Flag as inappropriate
  44. Add point Subtract point
    magnexor (1 Point) July 20, 2010 at 8:29 pm

    Thank you so much! I needed this so much – and you presented it in such an easy to follow manner!

    Flag as inappropriate
  45. Add point Subtract point

    hey,i understand how to add thumbnails but how do you get them to be on the left side of your posts like you do?

    Flag as inappropriate
  46. Add point Subtract point
    Jason (1 Point) July 8, 2010 at 7:57 pm

    Hey this helped alot

    Though what is the link for my thumbnail in relation to the post? I’m rather new to this. I tried “img/blogimage_1.jpg” but I guess it’s something bit more technical than that?

    Thanks

    Flag as inappropriate
  47. Add point Subtract point
    chike (1 Point) July 3, 2010 at 10:56 am

    thanks alot for the detailed explanaition.

    Flag as inappropriate
  48. Add point Subtract point
    portal berita (1 Point) June 22, 2010 at 12:13 am

    tanks for tutoral is ok

    Flag as inappropriate
  49. Add point Subtract point
    DarkL00k (1 Point) June 15, 2010 at 4:31 am

    hey bro, i am really impress from your article……really helpfull 4 me……………………………

    Thanks a Lot

    Flag as inappropriate
  50. Add point Subtract point
    sange (1 Point) June 10, 2010 at 3:18 am

    Thank you for you post! It just what I was looking for! It works great :o)

    Flag as inappropriate
  51. Add point Subtract point
    Tanveer Malik (1 Point) June 3, 2010 at 5:49 pm

    Hi an excellent post have really enjoyed its every word. I am using AgentPress theme which uses a custom ‘enhanced.php’ file to create thumbnail hyperlinks from the current url. I intend to make the hyperlinks from another url and think this Custom Field idea will help me in achieving my objective.
    Thanks a lot for sharing this wonderful piece of information.

    Flag as inappropriate
  52. Add point Subtract point
    shevaa|webdesignersblog (1 Point) June 3, 2010 at 4:35 am

    wow nice article…im going to use it thanks for sharing..

    Flag as inappropriate
  53. Add point Subtract point
    Rakesh Narang (1 Point) June 3, 2010 at 3:39 am

    Thanks a lot,

    But i have a theme that has these things enabled, how can i add just thumbnails and that which looks good.

    Regards,
    Rakesh, CEO Wizard Journal

    Flag as inappropriate
  54. Add point Subtract point

    Thanks, I was trying to do just that! A little google search later, I found that page > 5 minutes later I have my thumbnails working.

    Flag as inappropriate
  55. Add point Subtract point

    Hafta say thanks for this… I was having trouble trying to figure out a feature of this theme I am working with and a better understanding of custom fields is just what the doctor ordered!

    Flag as inappropriate
  56. Add point Subtract point
    car freak (1 Point) May 3, 2010 at 10:32 am

    thats great idea,thanks for this article

    Flag as inappropriate
  57. Add point Subtract point
    Ethan (1 Point) May 2, 2010 at 10:44 am

    Thanks! I’ve spent a little bit of time trying different alternatives and this is simple and works like a charm!

    Flag as inappropriate
  58. Add point Subtract point
    Dat Tai (1 Point) May 1, 2010 at 11:56 pm

    very cool toturial

    Thanks alot

    Flag as inappropriate
  59. Add point Subtract point
    Macoway Advertising (1 Point) May 1, 2010 at 3:25 pm

    Thumbnails for our News Blog . http://www.macoway.com/news/

    Flag as inappropriate
  60. Add point Subtract point
    Woman Luxury (1 Point) May 1, 2010 at 3:24 pm

    We would like to add custop thumbnails to the best Woman Website on the internet : http://www.WomanLuxury.com !

    Flag as inappropriate
  61. Add point Subtract point
    Ali Hussain (1 Point) April 28, 2010 at 4:38 am

    How can we show these thumbnails in rss feed

    Flag as inappropriate
  62. Add point Subtract point
    genmost (1 Point) April 9, 2010 at 4:57 pm

    nice tutorial… clear for me now! good job

    Flag as inappropriate
  63. Add point Subtract point
    Epenkah (1 Point) March 22, 2010 at 3:48 am

    it’s a great tutorial that i’m looking for. thanks :-)

    Flag as inappropriate
  64. Add point Subtract point
    Aaron Newton (1 Point) March 17, 2010 at 11:58 pm

    As of WordPress 2.9 you can use the_post_thumbnail(); to grab a post/page thumbnail once you have set this up in your functions.php file. It is described here:

    http://markjaquith.wordpress.com/2009/12/23/new-in-wordpress-2-9-post-thumbnail-images/

    Flag as inappropriate
  65. Add point Subtract point

    It doesn’t work.

    Also what is “the loop”. SInce It’s not explained, I feel left out “the loop”

    Flag as inappropriate
  66. Add point Subtract point
    the cat (1 Point) March 14, 2010 at 9:18 pm

    nice article …
    but i have several question to ask …
    i use the timthumb.php for my wordpress, the question is :
    1. is Google image can find my image that i thumbnail /link to my post (in my post, there’s no image, because after upload an image i’m not insert it to post) ?
    2. when google image find my image, which url they pointed? my post url, or my image store url ?
    ex : XXXX.com/myimage.htm or media/upload/image.jpg

    its important for me because i want to make a wallpaper site, but i’ve a little confused about timthumb.php

    hope you can answer my question as soon as possible.Thanks.

    Flag as inappropriate
  67. Add point Subtract point
    Firmino (1 Point) March 12, 2010 at 12:31 pm

    I love you! LOL
    you saved my urgent case!!

    thank you very much! :D

    Flag as inappropriate
  68. Add point Subtract point

    I have this installed and looking great on my blog but I would like to make the thumbnail clickable to take it to the permalink of the post. Is there anywhere I can get support in implementing this?

    Flag as inappropriate
  69. Add point Subtract point
    โหลดเพลง (1 Point) February 4, 2010 at 10:45 am

    Thanks for the Explorer tip

    Flag as inappropriate
  70. Add point Subtract point

    Great article but why does the thumbnail show above the title ? How would I fix that?

    Flag as inappropriate
  71. Add point Subtract point
    เพลงใหม่ล่าสุดเดือนนี้ (1 Point) February 2, 2010 at 11:23 pm

    thanks for sharing. So mush128

    Flag as inappropriate
  72. Add point Subtract point
    Chirag Kapta (1 Point) February 2, 2010 at 3:59 am

    We are Solution Provider for HVAC & R Segment in any Industries. We are into trunkey Projects, Precision, Air-Conditioning, Process Chillers, Hot & Cold insulation, HVAC Services like AMC with operation.For more information contact +91-7926423303 Email:sales@mkengineer.com.(rs090d389)

    Flag as inappropriate
  73. Add point Subtract point
    เพลงสากลใหม่ (1 Point) February 2, 2010 at 3:28 am

    thanks for sharing. So mush121

    Flag as inappropriate
  74. Add point Subtract point
    โหลดเพลงใหม่ฟรี (1 Point) February 1, 2010 at 5:11 am

    Great post . Thanks147

    Flag as inappropriate
  75. Add point Subtract point
    เพลงใหม่ล่าสุด (1 Point) January 30, 2010 at 11:26 pm

    wow Great article, thanks!

    Flag as inappropriate
  76. Add point Subtract point
    Hippyer (1 Point) January 26, 2010 at 2:53 pm

    I used this code in index.php

    <img style="margin:15px;"align="right" src="ID, “thumbnail”, true);?>” />

    It appears great on index.php but when you click to read the post the image does not appear. Why not please?

    Flag as inappropriate
  77. Add point Subtract point

    Great tutorial, thankyou. I was wondering how much more complicated it would be to insert and random image from a folder if there was no thumbnail added to the post? Say just a bunch of generic ones, similar to those on the comment system.

    W

    Flag as inappropriate
  78. Add point Subtract point
    skycaddie (1 Point) January 19, 2010 at 1:10 pm

    Thanks for the help. I am fairly new to WP but with your help I am learning quickly.

    Flag as inappropriate
  79. Add point Subtract point

    I’m using the streamline theme and had no luck. All it does is show a clickable text link of the title of the post itself, rather than the thumbnail i want…

    any idea what i’m doing wrong?

    Flag as inappropriate
    • Add point Subtract point

      I could not get the dang POST THUMBNAIL thing to work and I noticed after the picture gets “crunched” where you pick the size of the thumbnail and such, there is a text link that says USE AS THUMBNAIL or similar, and you have to click it. Once you do, you will see behind the modal overlay, your image posts in that area of the POST THUMBNAIL

      Flag as inappropriate
  80. Add point Subtract point
    Muhammad (1 Point) January 14, 2010 at 9:39 pm

    i am reading your post and i love how u explain things. u are wicked, contact me if you want 10 bucks. :) peace.

    i ain’t joking here

    Flag as inappropriate
  81. Add point Subtract point

    I’ve created thumbnails using that NextGen plugin and place a URL of it as the value. However sometimes thumbnails show up and sometimes they don’t. Mostly depending on browsers.

    I’ve recreated the thumbs a few times and cleared the cache. I’m sort of fishing around the internet to see if anyone has experienced thumbs that appear and disappear.

    Any suggestions?

    Flag as inappropriate
  82. Add point Subtract point

    This is what I’m looking for.

    I’m new to wordpress. This is a great tute.

    Splendid explanation too. Well done and Thank you.

    Ben

    Flag as inappropriate
  83. Add point Subtract point

    Hups, i have found my mistake…the url of the image was wrong…..sorry :)

    Flag as inappropriate
  84. Add point Subtract point

    Sorry, here is the code again

    <a href="”>
    <img style="padding:10px; margin:10px;" width="150" height="150" src="ID, “Thumbnail”, true); ?>” />

    <a href="”> »

    Flag as inappropriate
  85. Add point Subtract point

    Hi David,
    your tutorial is very easy to understand, but i will be crazy that i don´t get the thumbnails on my page?!?!?!?
    Perhaps you can help me, do you see any mistakes in my code?

    <a href="”>
    <img style="padding:10px; margin:10px;" width="150" height="150" src="ID, “Thumbnail”, true); ?>” />

    <a href="”> »

    Thanks…. and greetings from germany…

    Flag as inappropriate
  86. Add point Subtract point
    sistah hollywood (1 Point) December 28, 2009 at 6:08 pm

    Great post but I think I’m missing something … I would like a thumbnail to appear in front of the post title; similar to whats showcased on this site – where you have a thumbnail, title of post, and an excerpt…Any help?

    Flag as inappropriate
  87. Add point Subtract point

    Hey Thanx! I Was looking for this. This Helped me a Lot :)
    Keep up the Good Work :D

    Flag as inappropriate
  88. Add point Subtract point
    lakshya (1 Point) December 9, 2009 at 1:36 am

    thanks a lot.this site is of great help.

    Flag as inappropriate
  89. Add point Subtract point
    lakshya (1 Point) December 9, 2009 at 1:18 am

    could you please specify what is image url that has to be entered in the value in custom field.

    Flag as inappropriate
  90. Add point Subtract point
    kristin (1 Point) December 7, 2009 at 1:37 pm

    I just did this on my test install of wordpress for my new site and it worked perfectly. This was by far the best tutorial on inserting thumbnails I could find. Thanks so much!

    Flag as inappropriate
  91. Add point Subtract point
    kosaidpo (1 Point) December 3, 2009 at 9:30 am

    nice post dude i definitely have to try out
    ;]

    Flag as inappropriate
  92. Add point Subtract point
    GökhanCAN (1 Point) November 27, 2009 at 4:13 am

    Thanks for this info. Good Luck!

    Flag as inappropriate
  93. Add point Subtract point
    Brian X. Murphy (1 Point) November 26, 2009 at 8:24 pm

    MAN! That’s just fantastic. Thanks for the help. I never knew how useful those custom fields could be! Thanks for explaining it so nicely.

    Flag as inappropriate
  94. Add point Subtract point
    Marjorie (1 Point) November 21, 2009 at 9:54 pm

    I’ve been searching how to do this for a while. Thanks for the tutorial!

    Flag as inappropriate
  95. Add point Subtract point
    Gavin McNamee (1 Point) November 11, 2009 at 9:26 am

    I’ve been looking for something like this for a while now…..thanks for a good article!

    Flag as inappropriate
  96. Add point Subtract point
    Deborah Leader (1 Point) November 1, 2009 at 5:04 pm

    I am trying to put thumbnails on the front page of all my recent posts. Finally, I find someone that can tell me how to do it…thank you. But, after using your advice, now I get nice little blank boxes above with a little red X above all my recent posts and no thumbnail. What’s am I doing wrong?

    http://www.writing-freelance.com

    PS-I bought this recently from someone else.

    Flag as inappropriate
  97. Add point Subtract point

    Hi, my thumbnails are showing up on top of my posts on my homepage. How do I get them to show under the post title and to the left of the excerpt?

    Thanks for any help!
    Jen

    Flag as inappropriate
  98. Add point Subtract point
    Bex White (1 Point) October 9, 2009 at 7:08 pm

    Oh – just to follow that one up – here is a neat little extra bit of PHP for the thumbnail on the front page whichs adds a link to the article page:

    <a href="”><img src="ID, “Thumbnail”, true);?>” border=”0″ style=”padding:0px 10px 10px 0px;” align=”left” border=”0″ />

    Simple, but effective :)

    Flag as inappropriate
  99. Add point Subtract point
    Bex White (1 Point) October 9, 2009 at 6:53 pm

    Excellent, that worked first time for me, I have been playing around adding widgets and apps trying to figure this out having no idea that it was such a simple job. The more I experiment with WordPress and customise it, the more I love the platform. Every minor problem or niggle I encounter is usually just my not knowing that there is a simple solution ready made and built in already.

    Flag as inappropriate
  100. Add point Subtract point

    And if you just want the thumbnail to show up in the meta data you can just add this to header.php in the section:

    <link rel="image_src" href="ID, "Thumbnail", true);?>" />

    Flag as inappropriate
  101. Add point Subtract point

    Hi, Great Post. Really helped me with setting thumbnails.

    I did have a question though. I’m using the Arras Theme. I’ve been successful at making a post and having a thumbnail of that post show up on the main page in the galleries.

    But what i can figure out is how to make it so that the thumbnail Only shows up in the main page, but not show up in the individual post?

    Please help.

    Thanks!

    Flag as inappropriate
  102. Add point Subtract point
    MetacomCreative (1 Point) September 7, 2009 at 11:51 am

    Great post, easy to read and implement

    Flag as inappropriate
  103. Add point Subtract point
    Shovan (1 Point) August 31, 2009 at 7:33 pm

    Thanks for the tutorial, Helped me

    Flag as inappropriate
  104. Add point Subtract point

    If I don’t want to add a thumbnail to a post, how can I make it so the space doesn’t show up?

    Flag as inappropriate
  105. Add point Subtract point
    vishal melmatti (1 Point) August 22, 2009 at 8:21 am

    I want add custom field to category. How it can be achieved?

    Flag as inappropriate
  106. Add point Subtract point

    Ive been working on different open and closed source CMS’s for over 7 years, in a way it became for me a hobby to test all of them all the time.
    Wordpress, is a very easy to install, yet very simple to use CMS, in fact you can learn how to publish articles within less than a minute.

    What i hate about this CMS that its extremely limited and you require to hardcore insert cods into your script files inorder to do something so simple like adding thumbnail to your article.

    comparing to other available CMS’s i will give it 3 out of 10, and these marks focus on its simplicity and effectiveness in publishing articles.

    Flag as inappropriate
  107. Add point Subtract point
    Elaine- (1 Point) August 17, 2009 at 3:46 pm

    i’ve been going crazy trying to figure out how to get a gallery of thumbnails for my photoblog, i thought this looked promising but it’s not clickable, the thumbnail, it doesn’t take you back to the post, so what, what????

    Flag as inappropriate
    • Add point Subtract point

      This can be achieved by adding some simple html like this in your index.php:

      <a href="” rel=”bookmark” title=”Permanent Link to “><img src="ID, “Thumbnail”, true);?>” width=”150px” style=”border: 2px solid #dfdfdf; float: right; margin-left: 10px;” />

      Flag as inappropriate
      • Add point Subtract point
        PompDA (1 Point) March 17, 2011 at 7:44 am

        Pasting again on this other clickable thumb sub-thread:

        Looks like this code is doing what I want. It links the thumbnail to the page–same as the text header generated in the excerpt. Thought I’d share. And remember to close the href tag :D

        <a href="”><img src="ID, “Thumbnail”, true);?>”/>

        Flag as inappropriate
  108. Add point Subtract point

    wow… thanks for explaining this in English! i think this overview was the cleanest explanation i’ve heard so far- great post :D

    Flag as inappropriate
  109. Add point Subtract point
    Zak Weinberg (1 Point) July 30, 2009 at 5:28 am

    This is the standard response (-:

    1. Tell you how awesome and helpful your site is.
    2. Tell you how awesome this actual tutorial is.
    3. (Optional but worthwhile sometimes . . .) Tell you how awesome you are.

    *Phew* Now I can ask a question:

    I used your advice, but now I get nice little blank boxes above all my posts. What’s to be done?

    http://www.oletoday.com/wordpress

    Thanks for your help,

    ZAK

    Flag as inappropriate
  110. Add point Subtract point
    Scott (1 Point) July 14, 2009 at 6:26 pm

    Would this also work with videos? Could you have a custom field to resize a video for say a featured video section and have it link to a full size version of the video?

    Flag as inappropriate
  111. Add point Subtract point
    Alyssa (1 Point) July 12, 2009 at 12:40 pm

    Great post! I’ve been wondering what the potential of custom fields are. I’ll definitely have to try it out. Thanks!

    Flag as inappropriate
  112. Add point Subtract point
    Kelly (1 Point) June 27, 2009 at 1:26 am

    What code do you use to add those beautiful related post thumbs under each of your blog posts?

    Flag as inappropriate
  113. Add point Subtract point
    Pablo (1 Point) June 18, 2009 at 3:05 pm

    Hey…

    Nice blog!!!

    I tried following your steps to get my thumbnails in my index page, but it didn’t seem to want to work.
    I have the theme called “WP-Magnum Black”, I was looking around the code in the index.php to see if this theme has included an option to play around with thumbnails, but my knowledge in programming is limited. I was wondering you if you could help me out.
    I want the thumbnails to be part of the preview of the posts that appear at the front page of my blog.
    Thanks for everything, before hand.

    JP

    Flag as inappropriate
  114. Add point Subtract point

    thank you very much!

    can i add a function to that,
    that will tell him to put a specific photo,
    if there isn’t a thumbnail to the post?

    Flag as inappropriate
  115. Add point Subtract point
    girlicious143 (1 Point) June 10, 2009 at 11:12 pm

    thanks for the tutorial.

    Flag as inappropriate
  116. Add point Subtract point
    SUBSWISS (1 Point) June 9, 2009 at 6:06 pm

    Thank you so much for this great tutorial , and its so easy :)

    I just want to ask you please, can I make a custom-filed and make it for audio files . ex: mp3 to the post without any mp3 or audio plugins?
    sorry for my bad English
    Thank you again and god bless you .
    regards

    Flag as inappropriate
    • Add point Subtract point

      Custom fields are just a convenient way of adding any extra data you want to a specific post. How you use the data is completely up to you—it just requires you to do some configuration on your end.

      For example, you could upload an MP3, have an “mp3″ custom field, and then use an if statement in your template file that detects if there is an Mp3 file associated with the post (and if so, to add a player of sorts that calls that specific file).

      The possibilities are endless, it’s totally up to you how you use the data in custom fields ;)

      Flag as inappropriate
  117. Add point Subtract point
    Ahmed Sabry (1 Point) June 6, 2009 at 10:48 am

    great topic …
    i made it completely.
    thanks
    :)

    Flag as inappropriate
  118. Add point Subtract point
    Derek Herman (1 Point) June 5, 2009 at 9:32 am

    You can also accomplish having a thumbnail image on the index and regular image on the single post page by using the excerpt and content hooks accordingly.

    For example, if you wanted to show a thumbnail when viewing a list of posts you can add the code to the excerpt and a short description. Then in index.php change the_content() to the_excerpt() and I believe it will work with RSS too.

    Flag as inappropriate
  119. Add point Subtract point

    see how I implement it on my site! It works great !!! thanks… -) It’s worth to see!

    Flag as inappropriate
  120. Add point Subtract point

    how to show different thumbnails for different categories ? ? ? ? ?

    Flag as inappropriate
  121. Add point Subtract point
    kelly (1 Point) June 1, 2009 at 1:22 am

    Thanks for this tutorial. Any way to amend this code so that I can show an image next to recent posts in the sidebar?

    Flag as inappropriate
  122. Add point Subtract point
    jubril (1 Point) May 26, 2009 at 6:29 pm

    I know this free but I can i get response please. I would really appreciate. I love this site its put together well and very helpful. This I need to find answer too

    Flag as inappropriate
  123. Add point Subtract point
    jubril (1 Point) May 21, 2009 at 6:44 pm

    I have tried everything you said, But can’t get it work

    My index is called home.php

    I tried customs, and added exact image location
    I tried thumb and thumbnail for name
    is what my code looks like
    site is http://www.twittermugshot.com
    http://i83.photobucket.com/albums/j317/jubril58/Capturecode.jpg

    Flag as inappropriate
  124. Add point Subtract point
    ivan (1 Point) May 20, 2009 at 2:42 pm

    Hello, thanks for the nice post. Now i have a problem here. I want to show attached image only in frontpage post.

    So when I add a new article to my blog I add a main image to every post, of course the image also will display when viewing a single the post.

    What i want is to show the attached image only on the main page post and not on a single post.

    Please tell me the way.

    Flag as inappropriate
  125. Add point Subtract point

    Hey,

    I would be happy with the SAME icon appearing next to all the titles. This guy has the concept down http://shuckabuck.com

    He has a poker chip with a mini date inside the poker chip. Looks pretty clean – I emailed him about it but no response.

    Do you have any ideas???

    -cal

    Flag as inappropriate
  126. Add point Subtract point
    Avangelist (1 Point) May 18, 2009 at 10:58 am

    Don’t worry, its single.php right.

    Flag as inappropriate
  127. Add point Subtract point
    Avangelist (1 Point) May 18, 2009 at 10:56 am

    This makes a lot more sense than some of the other guides on this.

    I know that index.php controls the master page(s) but I am not sure on the individual posts. Are you supposed to hook into single.php or page.php?

    Flag as inappropriate
  128. Add point Subtract point
    zakuan (1 Point) May 17, 2009 at 4:54 am

    Thanks for great tutorial.

    I need some kind advices from u with regards to my problem.

    Actually i’m currently using ‘Malawak’ theme (free Download) and it working fine on my blog (http://myteames.com/blog).

    However, i don’t know why thumbnail image did not appear.

    I’ve added Custom Field and URL of image, but still no image shown on my page.

    Can u have a look what’s actually the problem and advice me?

    Thanks in advance.

    Flag as inappropriate
  129. Add point Subtract point

    Hey another related question. Maybe you have already covered this on the site…

    How do you get a tiny thumbnail to post to the left of the post title?

    You have “Add Thumbnails to WordPress with Custom Fields” as the title for this post – how could you add say a wordpress icon to the left of that phrase?

    Thanks

    Flag as inappropriate
  130. Add point Subtract point
    AG Fabrega (2 Points) May 11, 2009 at 7:25 am

    I’ve done the steps to create a lead image, and on refresh it looks like it *wants* to load the image, but then I get the “broken/missing” image, quickly replaced with the alt text. I’ve tried giving the full path to the image and that doesn’t work either. Note: I’m running a modified Sharpfolio 2 theme.

    Any ideas? I can send screenshots or whatever…it’s driving me nuts.

    Thx.

    Flag as inappropriate
  131. Add point Subtract point
    Webdev (1 Point) April 27, 2009 at 4:59 pm

    Great tut if you want something unique! But let me one tip :) If you just want to add a thumbnail to your post so it can be identified in a visual way too (and of course, to attract visitors), there are WP plugins for that and no coding is needed.

    Flag as inappropriate
  132. Add point Subtract point

    wow you are the man – woot woot!

    Flag as inappropriate
    • Add point Subtract point

      cal, my guess is that you’re editing the wrong part of the template. That said, I think there is actually an alternative solution in your case (this does not apply to anyone else).

      It appears that your theme actually includes an easy way to use thumbnails by default (without manually adding code as this tutorial suggests). Do me a favor, and change the title of your custom field to “hpbottom” for the thumbnail. Make sure the image size is 70×70.

      There is a note in your HTML that suggests this should work for the theme you currently have applied to your blog.

      Flag as inappropriate
  133. Add point Subtract point
    CgBaran Tuts (1 Point) April 25, 2009 at 1:57 am

    Great tutorial thanks

    Flag as inappropriate
  134. Add point Subtract point

    I have done all the steps listed an the image is not showing up. My image is here: http://pitchersdrills.com/wp-content/themes/church_30/images/thumbnails/mirrorthumbnail.jpg

    I added the custom fields “thumbnail” and the link to the image shown above

    I also edited the index.php coding you suggested

    1. <img src=”ID, “Thumbnail”, true);?>” />

    directly underneath the : #

    “This outputs an image, using the Value of the Key, Thumbnail, which we’ve inserted into our post. It can be inserted ANYWHERE within the while loop, allowing you to float it to the left or right of the header and entry, display it above an entry, below, whatever you want.”

    As you can see on my homepage pitchersdrills.com the thumbnail is not showing up under the “TOOLS” section of my homepage “read more” area.

    Thumbnail goes with the paragraph below…like they have in the demo on the church 30 wordpress template: http://www.studiopress.com/demo/church.html

    “The mirror is one of the most basic pitching aids available to athletes. Mirrors are great for practice since you can make sure you are in the correct pitching positions at all times. Unlike cameras and video-recorders, mirrors don’t require batteries and can be used to practice on your own. You also receive clear and instantaneous feedback with every practice drill you do. Mirrors can be placed on the ground at an angle or mounted on the wall with clips and screws. The mirror pictured below… [Read more of this review]”

    Thoughts?

    Flag as inappropriate
    • Add point Subtract point

      It’s hard to say without actually having access to the blog. My first guess is that the name of the custom field, and then name typed in the theme code are not an exact match. Be sure both of them are “Thumbnail”.

      Also, be sure you’re actually clicking “Add” or “Update” when inserting values into custom fields.

      Do you have a URL where we can see it?

      Flag as inappropriate
  135. Add point Subtract point

    Is there a way to say… if there is no Thumbnail is specified, display placeholder.jpg ?

    Flag as inappropriate
  136. Add point Subtract point

    Great post and easy to understand! I just added this code to the upcoming post query in the sidebar on one of my sites nex to the_title() and it looks niiiiiiiiiice. Thanks.

    Flag as inappropriate
  137. Add point Subtract point

    Eu precisava disso, muito obrigado

    pt-br

    Flag as inappropriate
  138. Add point Subtract point
    Sara W (1 Point) April 12, 2009 at 8:01 pm

    Thank you muchly for this!! Exactly what I was looking for.
    One question…how can I get the thumbnail to be above my text instead of showing up below it?
    (I’m a newb – can’t figure it out!)

    Flag as inappropriate
  139. Add point Subtract point
    Sirwan (1 Point) April 2, 2009 at 8:09 am

    exactly the type of thing i need, thanks mr legget

    Flag as inappropriate
  140. Add point Subtract point
    TJ Mapes (1 Point) March 31, 2009 at 6:29 pm

    Am I wrong to say that these won’t show up in RSS feeds?

    Flag as inappropriate
  141. Add point Subtract point
    Anthony Foster (1 Point) March 20, 2009 at 9:53 am

    Is there a way to have the fields created and filled when you create a now blog on WPMU….so they are already there when it is created?

    Flag as inappropriate
  142. Add point Subtract point
    SecondCity (1 Point) February 20, 2009 at 9:42 am

    not getting thumbnail images on my site. Using ‘Digital Statement” with wordpress 2.7.1.

    Flag as inappropriate
  143. Add point Subtract point

    I love the site redesign. Thanks for the helpful tutorial!

    Flag as inappropriate
  144. Add point Subtract point

    I found a way using “in_category”, but it only shows the the posts that are in the same category. Anyway, I think I’ll use that for the moment until you finish the tut.

    Thanks a lot again.

    Flag as inappropriate
  145. Add point Subtract point

    @cK: I’m working on a tutorial for that right now mate ;) It’s no big secret or anything, just needs some figuring out. There are lots of ways to do it I’m sure.

    Flag as inappropriate
    • Add point Subtract point
      Glenton (1 Point) March 18, 2009 at 7:48 am

      Did you ever finish that tutorial? I’ve been looking for a solution fro this for quite some time, I need to display a thumbnail in related posts but not the way that the “Related Posts With Thumbnail” does it by scanning for a image inside the post. That won’t work for Magazine type these that use custom fields Where allot of the post won’t even have images in them but will have a custom field image not if you post a video but there is no thumbnail in the post but one inside a custom filed.

      Flag as inappropriate
  146. Add point Subtract point

    Maxene,

    Did you manage to find the solution to your problem?

    I’m having the same problem here and I’m at my wits end.

    Any help is much appreciated. Thanks.

    Flag as inappropriate
  147. Add point Subtract point

    First of all, thanks a lot for the great work you have done in this site. It is really helpful.

    I would like to know how could I add thumbnails to my related posts. Just like you did here. I know this is like a TOP SECRET for some people, but the same was with the latests posts thumbnails. I’m really, really needing that option for my site.

    If you could give me any help, name of a plugin or a clue of something a could use to get it done I will appreciate it.

    Thank you very much for everything.
    GOD bless…

    Flag as inappropriate
  148. Add point Subtract point
    mavi derin (1 Point) December 26, 2008 at 4:21 pm

    thanks for this info…

    Flag as inappropriate
  149. Add point Subtract point

    Hey tried editing the code in the index file, added the custom fields “thumbnail” and could not seem to get it to work. I want to be able to attach seperate thumbnails to each post I create above the heading of each post. Here’s my url

    http://www.criticalspeech.com

    Am I missing something?

    Flag as inappropriate
  150. Add point Subtract point

    Hi,

    Great tutorial, thanks!

    I have used the cod and it works fine but all of a sudden i can only view the image on the full post page. The code is identical in both index.php and single .php

    any suggestions?

    Flag as inappropriate
  151. Add point Subtract point
    Paris Vega (1 Point) December 12, 2008 at 12:36 pm

    Very easy to understand. Thanks.

    Flag as inappropriate
  152. Add point Subtract point

    Hi David,

    thanks a lot for your tutorial.

    Is there any way to set a default thumbnail (url) if we use the custom fields?

    Thanks again

    Chris

    Flag as inappropriate
  153. Add point Subtract point

    Grant you just made yourself something to do with it,

    Flag as inappropriate
  154. Add point Subtract point

    I love you so much! Great place to visit!,

    Flag as inappropriate
  155. Add point Subtract point
    Garrick (1 Point) November 4, 2008 at 2:07 pm

    Very interesting site ! Good work ! Congratulations :),

    Flag as inappropriate
  156. Add point Subtract point
    Nekobaby (1 Point) October 24, 2008 at 12:18 am

    For clarity purposes, this is the coding I’m currently working with

    <img src="ID,

    "Thumbnail", true);?>"" style="float:right; margin: 15px 0 auto 0;" height="125px" ;/>

    Flag as inappropriate
  157. Add point Subtract point
    Nekobaby (1 Point) October 24, 2008 at 12:14 am

    Is there anyway to hide the text for the $thumbnail. I just want the thumbnail to show next to the other meta-tags. See HERE.

    Flag as inappropriate
  158. Add point Subtract point

    Thanks David for this cool tuto.
    i do all steps descriped in this tuto, but when i publish my post, i get a big image not small.

    hope you can help me.
    have a nice day

    Flag as inappropriate
  159. Add point Subtract point

    cool tutorial…i had a question…
    i want to show image1.jpg if $Thumbnail was empty. what is the code for it?

    Flag as inappropriate
  160. Add point Subtract point
    Jazcash (1 Point) October 1, 2008 at 5:54 pm

    Ah, I’ve been looking for ages on how to do this and all along it’s been sitting right here :D
    Thanks Dave!

    Flag as inappropriate
  161. Add point Subtract point

    @Straderade: That would involve the use of CSS. If you’re familiar with CSS already, you could do something like this in your stylesheet:

    .thumbnail {
    padding:20px;
    border:3px solid #000;
    }

    etc…

    And then add that class to your image tag in your layout code:
    <img class=”thumbnail” src=”<?php echo $Thumbnail;?>” />

    Flag as inappropriate
  162. Add point Subtract point
    Straderade (0 Points) September 29, 2008 at 12:03 pm

    FYI <<– Newb here –

    I was able to get the image to work but how would you style it i.e. center, padding, etc.

    I tried using .thumbnail

    Flag as inappropriate
  163. Add point Subtract point

    thats funny. I just did an automatic upgrade to WordPress 2.6.2 today. Same Error. Is there like a hack I need to learn to enjoy this feature? I’m a very nervous person when I see other blogs leaving me in the dust. anyways what do you think I should do? Don’t say Google! My wrist is tired from searching all day.

    Flag as inappropriate
  164. Add point Subtract point

    @Maxene: Sounds like an error with your database, or possibly with your WordPress installation Maxene. Perhaps reinstall it?

    Flag as inappropriate
  165. Add point Subtract point

    I received an error when adding a new custom field. Am using wordpress 2.6.1.
    The message keeps saying “An unidentified error has occurred” I guess I’ll give up for now.

    Flag as inappropriate
  166. Add point Subtract point
    NaldzGraphics (1 Point) August 31, 2008 at 12:24 pm

    great.this is very helpful to me.thanks a lot david

    Ronald

    Flag as inappropriate
  167. Add point Subtract point

    Check out this WordPress plugin if you need thumbnails, but don’t want to mess with custom fields:

    http://wpforsale.com/premium-wordpress-plugins/automate-thumbnails-in-wordpress-like-magic/

    Flag as inappropriate
  168. Add point Subtract point

    Awesome tut! Been looking wondering how to include thumbnails for posts in a non-clunky way :)

    Flag as inappropriate