Giving each WordPress post a thumbnail, and display the thumbnail on the home page
November 21, 2007 – 8:25 pm | by Miriam SchwabYou may encounter situations where you need to automatically display a thumbnail or image of some kind that will link to posts. Here’s an example of this kind of situation: you want to display recent posts from a certain category on your home page, with a thumbnail for each post and maybe the title and an excerpt. Or, I recently had a client that had a box on their homepage for multimedia where they wanted an image to appear that would represent the latest post in the Media category and would link to that post. A link to this site is at the end of this post, so read on.
I found the solution in two amazing WordPress themes: Mimbo and The Morning After. They both use thumbnails on their home page, and they do it by using WordPress’ mysterious Custom Fields feature.
You need to be able to upload images to your server in order to do this. You can do this via FTP, but to make this as easy as possible for clients, I use the Filosofo Old-Style Upload Plugin which creates a link on your nav bar where you select files for uploading. But first you need to configure this plugin and select a folder where all uploads will be saved:
- Upload the plugin and activate it.
- Go to Options > Uploads.
- Enter your destination directory. I think the best is to use your images folder in your theme folder so that any images you upload will be in an easily portable place. So the path could be something like /home/server/public_html/wp-content/themes/themefolder/images. The plugin will suggest a path, and it is usually right.
- Enter the URI of the folder. It’s something like http://www.yoursite.com/wp-content/themes/themefolder/images.
- You might as well up your maximum file size. I make it 500 kb.
- Allowed file extensions: jpg, jpeg, gif, png, pdf – I add PDF and other types of files I think clients may want to upload.
- Minimum level to upload: I leave it at 6 since I have no idea what this means.
- Click Update Options.
That’s done. Now for how to create a post with a thumbnail image.
- Create an image for your post with the right width and height. The size of the image depends only on the design of your site and where it is going to appear.
- Go into the admin of your site. Click on Upload (it’s on the upper nav bar).
- Select the file you are uploading, select No Thanks so it won’t create a thumbnail, give it a description (that’s good for Google) and click Upload File.
- Once it’s uploaded it will show you the entire URL of the image. Note particularly the last part of the link where it says the name of your image, especially if there are any capitals in any part of the name. You will have to enter the exact file name in step 8.
- Go to Create Posts. Enter your post and title as you wish. Make sure to select the category you have selected as the one that will appear with the thumbnails. Now scroll all the way down to the bottom of the screen where it says Custom Fields. Click on the plus button to expand it.
- Enter the word Image (with a capital I) in the Key field.
- In value, enter the exact name of the file you uploaded. For example picture.jpg or image.gif. Click Add Custom Field.
- Save your post.
Now we need the code that will make this thumbnail appear where you want it to appear. Following is the code for having a thumbnail appear with the title underneath it. This code is adapted from the Mimbo theme, but the code in The Morning After is similar:
<?php
// this is where the Features module begins
query_posts('showposts=1&cat=199'); ?> //change the showposts number to the number of posts that you want to appear, and change cat=199 to your category number, which you can find out by going to Manage > Categories
<?php while (have_posts()) : the_post(); ?>
<div class="thumbnails"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php echo get_option('home'); ?>/wp-content/themes/themefolder/images/<?php
// this is where the custom field prints images for each Feature
$values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="" /></a>
<p class="title"><a href="<?php the_permalink() ?>" rel="bookmark">
<?php
// this is where title of the Feature gets printed
the_title(); ?></a></p></div>
<?php endwhile; ?>
Wanna see an example? Check out this site, scroll to the bottom and look at the left-most column that is called Media. That image there is a thumbnail that was uploaded and entered in the Custom Field of the post it links to.
Update Nov. 27, 2007: This post got a lot of comments here, and on Weblog Tools Collection who referred to it. Lots of people gave more recommendations on how to manage thumbnails with custom fields and/or plugins, so I collected these tips into one post which you can see here: Images, thumbnails and custom fields in WordPress.
![[del.icio.us]](http://images.del.icio.us/static/img/delicious.small.gif){kind=small}
162 Responses to “Giving each WordPress post a thumbnail, and display the thumbnail on the home page”
By Ryan on Nov 23, 2007 | Reply
Useful tip you’ve got there, I didn’t know that was possible. Although I’m assuming you could just upload the image using the default WordPress upload instead of using any fancy route.
“Minimum level to upload: I leave it at 6 since I have no idea what this means.”
I assume that is referring to the WordPress user levels which are ranked from 0 – 10. 10 is an administrator and 0 is a subscriber normally – I think.
By Miriam on Nov 23, 2007 | Reply
The reason I use the upload plugin is because if you just use the standard upload in the create post page, WordPress puts the files in folders that are according to date. This means that all files uploaded in November 2007 will be in something like uploads/2007/november. When you get to December, the images are uploaded in a different folder. So you can’t have one URL listed in the code for where the images can be found.
The other disadvantage is if you have to port your blog to another server or something, you may have trouble getting the images over successfully if they’re outside of your themes folder.
Did I explain myself properly?
By Ryan on Nov 23, 2007 | Reply
Under /wp-admin/options-misc.php you can set your image upload folder to anywhere you like and un-tick the “Organize my uploads into month- and year-based folders” box. Then I’m pretty sure you can set that to be your theme folder if you want.
Unless I’m mistaken (probable), that should avoid the need for the upload plugin.
Ryan,
By Miriam on Nov 23, 2007 | Reply
The problem with that (I think) is that you are making changes to the core files which will be over-written if upgraded or moved. You could theoretically remember to keep that change, but it just makes things more complicated.
By Ryan on Nov 23, 2007 | Reply
Core files? No, not at all. They’re just options in the admin panel, entirely standard and should function fine after any upgrade.
By Ryan on Nov 23, 2007 | Reply
In case my first explanation wasn’t very clear …
(1) Go to your admin panel
(2) Choose “Options” in the main menu
(3) Choose “Miscellaneous” in the sub menu
(4) Enter your upload folder in “Store uploads in this folder:”
(5) Un-tick the “Organize my uploads into month- and year-based folders” box
There is definitely no editing of core files, theme files or anything of the sort for this to work. It’s an out of the box WordPress feature.
By Miriam on Nov 23, 2007 | Reply
I can’t believe I never knew about that! That is so handy. I have to write a post about this at some point, I think.
By bssn on Nov 24, 2007 | Reply
I’m using the custom field for my blog, that’s a amazing function of wp, learnt it from wpdesigner.com.
By Ryan on Nov 24, 2007 | Reply
Does anyone know of a plugin or similar which will let you choose where you want to upload something? Ie: I’d like to have a folder for uploading documents and a separate folder for uploading images. I’m launching a new design for one of my sites and previously I had separate folders for documents and images. But with the default WordPress setup, I’ll need to amalgamate them which I’d rather not do if I can help it.
Worst case scenario, I’ll need to write/borrow a small upload script and shoehorn it into my WordPress admin area. But I’d prefer to use an off the shelf system if one is available.
By Andy on Nov 25, 2007 | Reply
I use custom fields for thumbnails also on my blog. It works out great. I use them to show on the home page for each post and in the archives.
By Aaron on Nov 25, 2007 | Reply
This is something I’ve been doing for a while now. I use the Photopress plugin which allows me to upload all images into a particular folder (without subfolders) but also allows for tagging images into ‘categories’ – so you can arrange them in Photopress, but they’re all kept in the same folder.
Photopress also allows you to set your own thumbnail size and the ability to create square thumbnails (which is what I do). You can even globally recreate thumbnails for images that you haven’t created thumbnails for or for when you want to change the default thumbnail size.
Once I’ve got them uploaded and thumbnailed, I just call the thumbnail via a custom field extractor.
By the way, this isn’t an ad for photopress.
It’s just a plugin I use. You can click on my name for the link to my site to see what I did. It’s just a personal site.
By aNieto2k on Nov 25, 2007 | Reply
A plugin for do it…
http://www.anieto2k.com/plugins-themes/mis-plugins/mia-wordpress-plugin-imagenes-aleatorias-de-tu-blog/
By Miriam on Nov 26, 2007 | Reply
@Andy – that’s a great use of thumbnails, but almost as good are the recipes on your site! Are they your recipes? Do you take the photos? If I had time, I’d do the same thing. I also make some things that are really good, and then forget about them. Or I change something in the recipe that makes it even better, and then I can’t remember what I did.
I like the idea of searching by ingredient, but it didn’t work for me. What’s it supposed to do?
@aNieto2k – I’d love to see what that plugin does, but the explanation is not in English. Do you have any information on it in English, or can you just describe briefly what it does?
By Ryan on Nov 26, 2007 | Reply
Google translator to the rescue … http://www.google.com/translate?u=http%3A%2F%2Fwww.anieto2k.com%2Fplugins-themes%2Fmis-plugins%2Fmia-wordpress-plugin-imagenes-aleatorias-de-tu-blog%2F&langpair=es%7Cen&hl=en&ie=UTF8
By Miriam on Nov 26, 2007 | Reply
@Ryan – I really should start using that more often. But the translation isn’t so clear, so here’s what i think the plugin does, tell me what you think: it displays random images that are saved somewhere in your WordPress blog. If so, where does it pull the images from, i.e. which folder?
By Lonewolf on Nov 26, 2007 | Reply
I used a similar technique on my site to add a clickable list of thumbnails to my post.
I used custom fields so that I can integrate wordpress with the existing backend framework of my site and database structure.
The full tutorial can be viewed on my site: http://lonewolf-online.net/computers/knowledgebase/wordpress-custom-fields/
Another blog of mine uses exactly the same technique to display a thumbnailed image on each post which is again parsed and presented as a link to the full size image using WP Lightbox 2. This forms an image based blog, but I won’t post the link to it here though as its a bit adult orientated.
Hope the above tutorial is of interest to some.
By Miriam on Nov 26, 2007 | Reply
@lonewolf – that’s a great tutorial. I can see that I’m going to have to get to know WP custom fields a lot better. That’s what’s so fun about WP – there’s always something new and amazing to learn about it.
And thanks for the consideration and not posting the link to the other site here. I appreciate it.
By Edward P on Nov 26, 2007 | Reply
I use thumbnails in my posts with this exact method. You can see the results at http://o.rang.es/ — I think the images really add a lot to the posts.
A helpful hint: I have added more custom fields which are helpful if you want to provide attribution to the (CC licensed) photos you use.
By Miriam on Nov 26, 2007 | Reply
Hi Edward P – I love your URL and site! It’s really great. I don’t see where you used the custom fields for providing attribution. Can you give more details?
By Andy on Nov 26, 2007 | Reply
Miriam ,Thanks for the compliments! Most of the recipes are my own , if they are not I include the source of where it came from. I take all of the photos also.
The “Find Recipes by Ingredients” was broken when I upgraded to 2.3 and moved away from the UTW plug-in. I still need to fix it but when it works, you can click on multiple ingredients (to say what items you have on hand) and it shows you what recipes you can make with those ingredients.
By Ted on Nov 27, 2007 | Reply
What do you think about the Post thumb plugin? http://theblemish.com/post-thumbs-plugin/
By Miriam on Nov 27, 2007 | Reply
@Ted – I just posted a follow up post to this one with a collection of thumbnail and image solutions that use custom fields or plugins, and that is one of the solutions I listed. Check out the post here: Images, thumbnails and custom fields in WordPress.
By David on Nov 28, 2007 | Reply
I’ve been using an old WP plugin called Lr2ImageSnag that automates a lot of the thumbnail process. There’s a direct download in one of the comments (its no longer developed)
http://www.cineris.org/blog/2006/05/11/lr2imagesnag/
By Julian Johannesen on Dec 31, 2007 | Reply
thank you so much for this tutorial. it’s been really helpful. i’m not using your method right now, but i’m looking for ways to incorporate it into my family blog.
By Miriam Schwab on Dec 31, 2007 | Reply
You’re very welcome Julian! Stick around and I hope you’ll find more useful stuff here.
By Brady J. Frey on Jan 1, 2008 | Reply
Thank you for the fantastic tutorial – we’re demoing a new rebuild, and I’m integrating your above notes, it’s a great help! To make it easier on my users, I’ve installed http://rhymedcode.net/projects/custom-field-gui so that they get a predefined field without having to mess with the Custom area.
By Miriam Schwab on Jan 1, 2008 | Reply
Brady – that is an amazing plugin that you’ve mentioned! I’m going to have to look into it further.
By Kotsengkuba on Feb 11, 2008 | Reply
my site also uses mimbo theme however, as we all know, we have to manually type the custom fields each time we write a post.
i’m planning to have just one image per category but i wonder of it’s possible to have the main index thumbnail to be based on their categories?
anyone? thanks in advance.
By Tim on May 2, 2008 | Reply
You can get rid of those annoying Custom Field entries AND set default category images for when there are no images to accompany a post with VIVA THUMBS plugins for Wordpress. Check out the live demo at http://www.mediatricks.biz/demo It makes themes like MIMBO and The Morning After really easy to maintain.
Write a post -> Upload an Image _ > Publish
All your homepage and sidebar thubmnails are created on the fly by the plugin.
By sam rohn on Jun 17, 2008 | Reply
Post-Thumb Revisited, a free wordpress plug in will automatically thumbnail post images as well -
http://www.alakhnor.com/post-thumb/
By lihuawei on Jun 17, 2008 | Reply
Very good I like, thanking !
By Guillermo Scharffenorth on Jun 17, 2008 | Reply
Good article. Using the Filosofo plugin, however, is not really necessary. Blogers can use the included media manager and upload images taking care not to ‘insert’ the image after it is up in the server. Just copy the image URL, close the media manager and paste the URL in the corresponding custom field.
By Miriam Schwab on Jun 17, 2008 | Reply
@Guillermo – you are right about not needing to use the Filosofo plugin. I wrote this post before the release of WordPress 2.5, and managing images in previous versions was not as user-friendly as it is now.
Thanks for pointing that out.
By chris iiinside on Jul 28, 2008 | Reply
Thanks for the above info, This is going to be a massive help once I get it all up and running.
I want to use this plugin so that all my posts have a nice image header and when you search thgrough the archive the image shows up first then the header and info after which I’m sure it will do once completed but I’m unsure where to place the code you have given to make the thumbnail appear.
Thanks, hope you can help.
By Raymond on Aug 6, 2008 | Reply
Thank you for this article. It worked for me and I will implement the custom thumbnails on my redesign.
By Miriam Schwab on Aug 6, 2008 | Reply
@Raymond: You’re very welcome! I’m glad this tutorial helped!
By bryan on Aug 10, 2008 | Reply
can you tell me where to put da code?
im having problem just with it, cuz u didnt explain where to put da code~
By zech on Aug 15, 2008 | Reply
hey i’m having problems with that,i’ve filled out all the information but when i click update options i get an error saying page can not be displayed it seems like its trying to take me to this link http://localhost/PAMVERC/wp-admin/options-general.php?page=filosofo-old-style-upload.php&updated=true can you tell me whats wrong?
By AvenuEmpire on Aug 30, 2008 | Reply
Thanks man… I didn’t use your method exactly.. Instead for uploading images, in the VALUE field, I just inserted the picture URL. Thanks though, very helpful info!
By Mitchell Allen on Sep 13, 2008 | Reply
Wow!
I was looking for the location of the upload checkbox and randomly selected your site from Google.
I’m glad I saw this neat tip!
Also, Thanks to Ryan, for pointing out options-misc. I can never remember!
Cheers,
Mitch
By Ryan on Sep 14, 2008 | Reply
No problem. I hate using the default folder so that is one of the first things I change when I install WordPress.
At some stage I need to figure out how to change that in my personal blog (ryanhellyer.net) as my uploads are all stored by month at the moment as I had no idea how WordPress worked when I first installed it and haven’t gotten around to resorting everything. I wonder if there is a plugin available to automate that task?
By Abdel Faiz on Oct 2, 2008 | Reply
All about the Minimum level to upload option…
the general principle is that a given User Level allows the user to edit or modify postings for users that are at a “lower” User Level than themselves. Visitors that elect to register are automatically assigned User Level 0, 1, or 2, based on how the Administration > Settings > Writing Newly registered members field is set.
http://codex.wordpress.org/User_Levels#User_Level_1
By Vardis on Nov 9, 2008 | Reply
Nice work –well done!
By Sarah on Jan 17, 2009 | Reply
Do I have to use a magazine-type theme to get the thumbnail option? I inserted the code that was written above in my theme editor but it didn’t work – also tried inserting it in the “Key” section of the custom fields. Help!
By Ryan on Jan 21, 2009 | Reply
@Sarah No, you can use thumbnails for any theme you want. For example Miriam add thumbnails to every post here on WordPressGarage.com using the tecnique posted above.
By Phil on Feb 12, 2009 | Reply
hi – great article — however i got stuck when it came to adding the CODE — is this meant to be added to the INDEX.PHP page or the SIDEBAR.php pages [left and right] ?
where on these pages should the PHP code go?
By dave on Feb 19, 2009 | Reply
To make life easier: check out wp-choose-thumb.
A very simple to use plugin for displaying a default thumb for a post.
http://wordpress.org/extend/plugins/wp-choose-thumb/
By eric on Mar 13, 2009 | Reply
thanks for it. very useful information
By Shaz on Mar 18, 2009 | Reply
Hi
Thanks for the tip.. this is just what i need to do.
Just one quick question : Which template do i put your code into to make recet posts and thumbnails appear on my static wp homepage?
By semblance on Apr 2, 2009 | Reply
This is exactly the post I need. I have followed every step exactly, but only the title show the home page. When I look at the source code of the image and test it in the browser, it is correct. Any ideas. I see this post is rather old. Any good new plug ins you of perhaps that can do the trick? I would basically want to show the title and the image from the post (image to a cropped size) on the home page and perhaps the option of some of the text (first paragraph) with a “more” link.
By Teens Fashion on May 9, 2009 | Reply
i follow this and place thumbnail with my posts. i really appreciate you.
thx
By EchoBlogger on Oct 23, 2009 | Reply
I like 4 ways that help to show the post thumbnails in the Wordpress blog
http://www.echoblogger.com/wordpress/wordpress-related-posts-thumbnails/
By user on Oct 31, 2009 | Reply
this shit is not working for me.
By Ryan on Nov 4, 2009 | Reply
Support for custom post thumbnails has now been added into WordPress core for version 2.9. Simply upload an image, then click “use as post thumbnail” and if you theme uses the new functionality the thumbnail will appear along with your post.
To test out the new functionality you will need to download WordPress Trunk rather than the current stable release (2.8.5) as it hasn’t been released into the current stable version yet.
You can see it in action in the blog section of my site … http://pixopoint.com/
By Sam Rohn on Nov 28, 2009 | Reply
try the timthumbs script, see here for wordpress integration
timthumbs lets you call any image + parameters to generate a thumbnail, & seems to be the easiest way to add thumbs to your wp site these days -
see my site for an example, all of the thumbs for panorama previews etc are created w/ timthumbs
sam
By nana on Dec 11, 2009 | Reply
Hi, Thanks for the info.
When I want to “Update Option” under “Settings – Uploads”, I have error msg : “You do not have sufficient permissions to access this page.”?
May I know how to solve the problem?
Thanks!
By Sushant on Dec 14, 2009 | Reply
waiting for a stable wordpress version which supports thumbnails in core.
By Ryan on Dec 18, 2009 | Reply
@Sushant – It should be available within the next week hopefully
Or you can download the 2.9 RC1 right now … http://wordpress.org/development/2009/12/2-9-rc1/
By eONs on Jan 18, 2010 | Reply
The version 2.9.1 has release.Hope it meet what you want and required.
By Ed on Jan 23, 2010 | Reply
I just downloaded the plugin and get the error “You do not have sufficient permissions to access this page.” has there been a fix for this? I am using Wordpress v2.9.1.
Thanks
Ed
By Joanthan Sace on Feb 6, 2010 | Reply
Cool! ive been searching this for a week! thanks!