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.php. Find 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
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 inappropriateClick on “Screen Options” that is show on top then tick the Custom Fields.
Flag as inappropriateThanx for the Tut. But My Text Keeps getting under the Thumb. Any way to put it beside the Thumb?
Flag as inappropriateSorry. Re-pasted. :\
<a href="”><img src="ID, “Thumbnail”, true);?>”/>
Flag as inappropriateThis 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 inappropriateHi 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 inappropriateThank you so much for this, I’ve been searching everywhere
Flag as inappropriateThanks for your post. it really helped me.
Flag as inappropriateI 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 inappropriateAnother way of achieving this is given at globinch.com . Read How to Create WordPress Thumbnail Based Post Archives
Flag as inappropriatehttp://www.globinch.com/2010/11/01/how-to-create-wordpress-thumbnail-based-post-archives/
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 inappropriateI want to know how can i make custom widgets on
Flag as inappropriatehttp://newsxprs.com
yeah! At last i make it..thanks..
Flag as inappropriateпистолет пневматический umarex beretta eliteii – оружие пневматическое, магазин пневматического оружия, пневматическое оружие куплю, купить пневматическое оружие купить пневматику. Сайт pnevmatika.org
Flag as inappropriateWow, at last! It works.
Flag as inappropriateThanks site admin, you are a life saver :)
i needed this info for one of my video site :)
Regards,
Flag as inappropriatePummy
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 inappropriateOutside of the WordPress site? You would have to do one of two things:
1. You could use a custom query designed to pull the custom field key from the database. For instance, it might be along these lines: “SELECT meta_value FROM wp_postmeta WHERE post_id = ‘$post_id’ AND meta_key = ‘thumbnail’”
Of course, $post_id would contain the variable of the posts ID in WordPress.
2. You could call it the same way you do in WordPress, but you would have to require the WordPress core files. You can learn more about that here: http://www.corvidworks.com/articles/wordpress-content-on-other-pages
Flag as inappropriatecan you pls combine it with a center alligment command?
Flag as inappropriateReally helpful article. Other tutorials had pieces of code that just wouldn’t work. This did! Thanks!
Flag as inappropriateIm using featured image option in my theme can i use Custom field to give URL to that image.
Flag as inappropriateOh thank God there’s an easy solution!
Flag as inappropriateThanks 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.
How would I get this Thumbnail image to show in the summary when viewing an archive list of posts?
Flag as inappropriateThank you SO much!!!
Flag as inappropriateIt worked perfectly! Thanks for sharing this!!
Flag as inappropriate“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 inappropriateBest 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 inappropriateclear and concise
Thank you very much…
Flag as inappropriateHI,
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 inappropriatethasn adın
Flag as inappropriateGreat stuff … thank you for your help.
Flag as inappropriateHey Thanks…
Flag as inappropriateThanks 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 inappropriateThank for this, i have been looking everywhere for this solution.
Flag as inappropriatei found some other tutorials on customising my category posts but couldnt get them to work properly, but your worked a treat, thanks again.
Thank you thank you thank you! Just what I needed!
Flag as inappropriateThat’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 inappropriatethanks alot.. straight to the point, no thrills and it worked a treat. Perfect!
Flag as inappropriatethanks alot.. straight to the point, no thrills and it worked a treat. Perfect!
Flag as inappropriateCool! This tutorial was quite easy to follow. Thank’s alot.
Flag as inappropriateThank 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 inappropriateHi
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 inappropriateHey Neil,
I think the reason for this is that there is already a loop on that page, which means you will need to create another wordpress loop. In simple terms we are talking multiple loops:
http://codex.wordpress.org/The_Loop
Hope this helps. All the best.
Flag as inappropriatevideo sites
Flag as inappropriateVideo Sitesi……
Flag as inappropriateI 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 inappropriateThanks for the tutorial ….
Flag as inappropriateNow, i can use slide show in my blog
excellent stuff man…very usefull for a full time blogger like myself….keep it coming bro…cheers
Flag as inappropriateThis is amaizing, thx!
Flag as inappropriateit’s perfect for me when timthumb.php is not working… thank u so much. :)
Flag as inappropriatethank you for the information,
Flag as inappropriateThis was helped,
spirit! ! ! ! !
awesome … thx for share
Flag as inappropriatethank you its work for me..I’ve placed the code diatantara permalink
Flag as inappropriatethis tips is really useful, i am stuck in a problem, here is that, need solution for this one
i have posted 100 articles under category1 with custom field “featured” (only 20 posts have custom field values in them).
Flag as inappropriateNow i want to show random 5 posts, so can u propose me query that will get all those posts which have featured in them, i dont want the results to be come for all those posts which dont have featured values in them.
Thanks
http://www.Vaseemansari.com/blog/
@Vaseem … the code below should work
Flag as inappropriatequery_posts(‘orderby=random&meta_key=featured&showposts=5′);
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 inappropriateThank You!!!
Flag as inappropriatehttp://www.shoestores.tk/
Flag as inappropriatehttp://www.fashion-clothes.co.tv/
Flag as inappropriateI’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 inappropriateThank you so much! I needed this so much – and you presented it in such an easy to follow manner!
Flag as inappropriatehttp://www.wedding-dressesbiz.tk/
Flag as inappropriatehttp://www.resorts-2010.tk/
Flag as inappropriatehttp://www.last-minute.co.tv/
Flag as inappropriatehttp://www.building-houses.co.tv/
Flag as inappropriatehey,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 inappropriateHey 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 inappropriatethanks alot for the detailed explanaition.
Flag as inappropriatehttp://www.burning-tours.tk/
Flag as inappropriatehttp://www.all-insurance-all.co.cc/
Flag as inappropriatehttp://www.mens-wears.co.cc/
Flag as inappropriatehttp://www.network-marketingbiz.tk/
Flag as inappropriatehttp://www.facecream.co.tv/
Flag as inappropriatehttp://www.tour-agencies.tk/
Flag as inappropriatehttp://www.toys-shop.tk/
Flag as inappropriatetanks for tutoral is ok
Flag as inappropriatehey bro, i am really impress from your article……really helpfull 4 me……………………………
Thanks a Lot
Flag as inappropriateThank you for you post! It just what I was looking for! It works great :o)
Flag as inappropriateHi 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.
Flag as inappropriateThanks a lot for sharing this wonderful piece of information.
wow nice article…im going to use it thanks for sharing..
Flag as inappropriateThanks a lot,
But i have a theme that has these things enabled, how can i add just thumbnails and that which looks good.
Regards,
Flag as inappropriateRakesh, CEO Wizard Journal
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 inappropriateHafta 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 inappropriatethats great idea,thanks for this article
Flag as inappropriateThanks! I’ve spent a little bit of time trying different alternatives and this is simple and works like a charm!
Flag as inappropriatevery cool toturial
Thanks alot
Flag as inappropriateThumbnails for our News Blog . http://www.macoway.com/news/ …
Flag as inappropriateWe would like to add custop thumbnails to the best Woman Website on the internet : http://www.WomanLuxury.com !
Flag as inappropriateHow can we show these thumbnails in rss feed
Flag as inappropriateCool
Thankss a lot
Flag as inappropriatenice tutorial… clear for me now! good job
Flag as inappropriateit’s a great tutorial that i’m looking for. thanks :-)
Flag as inappropriateAs 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 inappropriateIt doesn’t work.
Also what is “the loop”. SInce It’s not explained, I feel left out “the loop”
Flag as inappropriatenice 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 inappropriateI love you! LOL
you saved my urgent case!!
thank you very much! :D
Flag as inappropriatenice , thanks alot bro
Flag as inappropriateI 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 inappropriateI would also like to make the image clickable. Did you ever receive an answer? I’ve been researching this for ages! Thanks!
Flag as inappropriateThanks for the Explorer tip
Flag as inappropriateGreat article but why does the thumbnail show above the title ? How would I fix that?
Flag as inappropriatethanks for sharing. So mush128
Flag as inappropriateWe 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 inappropriatethanks for sharing. So mush121
Flag as inappropriateGreat post . Thanks147
Flag as inappropriatewow Great article, thanks!
Flag as inappropriateI 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 inappropriateGreat 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 inappropriateThanks for the help. I am fairly new to WP but with your help I am learning quickly.
Flag as inappropriateI’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 inappropriateI 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 inappropriatei 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 inappropriateI’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 inappropriateThis 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 inappropriateHups, i have found my mistake…the url of the image was wrong…..sorry :)
Flag as inappropriateSorry, 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 inappropriateHi 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 inappropriateGreat 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 inappropriateHey Thanx! I Was looking for this. This Helped me a Lot :)
Flag as inappropriateKeep up the Good Work :D
thanks a lot.this site is of great help.
Flag as inappropriatecould you please specify what is image url that has to be entered in the value in custom field.
Flag as inappropriateI 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 inappropriatenice post dude i definitely have to try out
Flag as inappropriate;]
Thanks for this info. Good Luck!
Flag as inappropriateMAN! 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 inappropriateI’ve been searching how to do this for a while. Thanks for the tutorial!
Flag as inappropriateI’ve been looking for something like this for a while now…..thanks for a good article!
Flag as inappropriateI 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 inappropriateHi, 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!
Flag as inappropriateJen
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 inappropriateI added the code line but it’s not working. I see on your blog is going well.
Flag as inappropriateSo i kind of replace the one given here in the post with your , in the index.php ?
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 inappropriateAnd if you just want the thumbnail to show up in the meta data you can just add this to header.php in the section:
Flag as inappropriate<link rel="image_src" href="ID, "Thumbnail", true);?>" />
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 inappropriateYeah, I’m having the same issue
Flag as inappropriatefound this at http://code.google.com/p/arras-theme/updates/list and it worked
(don’t force thumbnail into post header) reported by m…@gogulski.com – This should really be an option rather than a forced item. local patch that turns it off at http://www.fr33agents.com: filters.php line 103: //$postheader .= ”;
Flag as inappropriateThis should really be an option rather than a forced item. local patch that turns it off at http://www.fr33agents.com: filters.php line 103: //$postheader .= ”;
Great post, easy to read and implement
Flag as inappropriateThanks for the tutorial, Helped me
Flag as inappropriateIf 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 inappropriateI want add custom field to category. How it can be achieved?
Flag as inappropriateIve 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 inappropriatei’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 inappropriateThis 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 inappropriatePasting 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 inappropriatewow… thanks for explaining this in English! i think this overview was the cleanest explanation i’ve heard so far- great post :D
Flag as inappropriateThis 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 inappropriateWould 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 inappropriateGreat post! I’ve been wondering what the potential of custom fields are. I’ll definitely have to try it out. Thanks!
Flag as inappropriateWhat code do you use to add those beautiful related post thumbs under each of your blog posts?
Flag as inappropriateHey…
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 inappropriatethank you very much!
can i add a function to that,
Flag as inappropriatethat will tell him to put a specific photo,
if there isn’t a thumbnail to the post?
thanks for the tutorial.
Flag as inappropriateThank 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?
Flag as inappropriatesorry for my bad English
Thank you again and god bless you .
regards
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 inappropriategreat topic …
Flag as inappropriatei made it completely.
thanks
:)
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 inappropriatesee how I implement it on my site! It works great !!! thanks… -) It’s worth to see!
Flag as inappropriatehow to show different thumbnails for different categories ? ? ? ? ?
Flag as inappropriateThanks 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 inappropriateI 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 inappropriateI 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
Flag as inappropriateI 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
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 inappropriateHey,
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 inappropriateDon’t worry, its single.php right.
Flag as inappropriateThis 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 inappropriateThanks 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 inappropriateYou appear to be running a plugin that generates thumbnails. I’m not sure how that plugin works unfortunately :(
Flag as inappropriateHey 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 inappropriateFor certain phrases, it would take a considerable amount of PHP work (at least, the way I’d think of doing it). You might be able to do it easier by assigning them to specific categories or tags, and then use if/or statements to get the icons to display.
Flag as inappropriateI’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 inappropriateCould you link to your site?
Flag as inappropriateGreat 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 inappropriatewow you are the man – woot woot!
Flag as inappropriateOkay here is a screenshot of what I am talking about.
http://pitchersdrills.com/wp-content/themes/church_30/images/thumbnails/pagecoding.jpg
Flag as inappropriatecal, 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 inappropriateGreat tutorial thanks
Flag as inappropriateI 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 inappropriateIt’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 inappropriateIs there a way to say… if there is no Thumbnail is specified, display placeholder.jpg ?
Flag as inappropriateGreat 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 inappropriateEu precisava disso, muito obrigado
pt-br
Flag as inappropriateThank you muchly for this!! Exactly what I was looking for.
Flag as inappropriateOne 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!)
exactly the type of thing i need, thanks mr legget
Flag as inappropriateAm I wrong to say that these won’t show up in RSS feeds?
Flag as inappropriateThat’s correct – you’ll need to edit your RSS output in order to show custom fields in your RSS feed (like we do here at Tutorial9).
Flag as inappropriateIs 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 inappropriatenot getting thumbnail images on my site. Using ‘Digital Statement” with wordpress 2.7.1.
Flag as inappropriateI love the site redesign. Thanks for the helpful tutorial!
Flag as inappropriateReally nice tutorial
Flag as inappropriateI 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@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 inappropriateDid 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 inappropriateMaxene,
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 inappropriateFirst 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.
Flag as inappropriateGOD bless…
thanks for this info…
Flag as inappropriateHey 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 inappropriateHi,
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 inappropriateVery easy to understand. Thanks.
Flag as inappropriateHi 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 inappropriateYep. I really need a default too!
Flag as inappropriateGrant you just made yourself something to do with it,
Flag as inappropriateI love you so much! Great place to visit!,
Flag as inappropriateVery interesting site ! Good work ! Congratulations :),
Flag as inappropriateFor 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 inappropriateIs 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 inappropriateThanks 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.
Flag as inappropriatehave a nice day
cool tutorial…i had a question…
Flag as inappropriatei want to show image1.jpg if $Thumbnail was empty. what is the code for it?
Ah, I’ve been looking for ages on how to do this and all along it’s been sitting right here :D
Flag as inappropriateThanks Dave!
@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:
Flag as inappropriate<img class=”thumbnail” src=”<?php echo $Thumbnail;?>” />
Little confused as to where the latter image tag is supposed to be placed. You say “layout code” but which one?
Sorry about my ignorance. I’m a photoshop guru, not a wordpress guru (but working on it) :)
Flag as inappropriateFYI <<– 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 inappropriateSimple, yet effective!
Flag as inappropriatethats 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@Maxene: Sounds like an error with your database, or possibly with your WordPress installation Maxene. Perhaps reinstall it?
Flag as inappropriateI received an error when adding a new custom field. Am using wordpress 2.6.1.
Flag as inappropriateThe message keeps saying “An unidentified error has occurred” I guess I’ll give up for now.
great.this is very helpful to me.thanks a lot david
Ronald
Flag as inappropriateCheck 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 inappropriateAwesome tut! Been looking wondering how to include thumbnails for posts in a non-clunky way :)
Flag as inappropriateHere I have another tutorial on how to make your first image post to be a thumbnail automatically without taking your time editing cropping thumbnail of your post.
Flag as inappropriateAutomatic WordPress Thumbnail Without Custom field and Featured image