elegant themes

Giving each WordPress post a thumbnail, and display the thumbnail on the home page

| November 21, 2007 | 193 Comments

You 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:

  1. Upload the plugin and activate it.
  2. Go to Options > Uploads.
  3. 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.
  4. Enter the URI of the folder. It’s something like http://www.yoursite.com/wp-content/themes/themefolder/images.
  5. You might as well up your maximum file size. I make it 500 kb.
  6. Allowed file extensions: jpg, jpeg, gif, png, pdf – I add PDF and other types of files I think clients may want to upload.
  7. Minimum level to upload: I leave it at 6 since I have no idea what this means.
  8. Click Update Options.

That’s done. Now for how to create a post with a thumbnail image.

  1. 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.
  2. Go into the admin of your site. Click on Upload (it’s on the upper nav bar).
  3. 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.
  4. 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.
  5. 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.
  6. Enter the word Image (with a capital I) in the Key field.
  7. In value, enter the exact name of the file you uploaded. For example picture.jpg or image.gif. Click Add Custom Field.
  8. 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.

Tags: , , ,

Category: Code Snippets, Tips

About Miriam Schwab: Miriam is the friendly CEO of illuminea, a WordPress design and development agency. Miriam is a huge fan of WordPress and has been using it for over five years now. In addition, Miriam and her team have been organizing the local Israeli WordCamp conferences for the past few years. View author profile.


Comments (193)

Trackback URL | Comments RSS Feed

  1. Ryan says:

    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.

  2. Miriam says:

    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?

  3. Ryan says:

    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,

  4. Miriam says:

    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.

  5. Ryan says:

    Core files? No, not at all. They’re just options in the admin panel, entirely standard and should function fine after any upgrade.

  6. Ryan says:

    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.

  7. Miriam says:

    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.

  8. […] Garage recently wrote a post explaining how any WordPress user can do this entitled Giving each WordPress post a thumbnail, and display the thumbnail on the homepage.  I recommend checking this out if you are interested in setting something like this up on your […]

  9. […] fixes and everything about blogging, especially with WordPress. Go ahead, subscribe to our feed!Giving each WordPress post a thumbnail, and display the thumbnail on the home page: Interesting tutorial on creating thumbnails for each post on your blog and using Custom Fields to […]

  10. bssn says:

    I’m using the custom field for my blog, that’s a amazing function of wp, learnt it from wpdesigner.com.

  11. Ryan says:

    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.

  12. Andy says:

    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.

  13. Aaron says:

    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.

  14. Miriam says:

    @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?

  15. Miriam says:

    @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?

  16. Lonewolf says:

    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.

  17. Miriam says:

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

  18. […] learned a lot about custom fields since I posted about programming thumbnails into your WordPress theme with custom fields, thanks to everyone’s comments here and on weblog tools collection, who referred to my post. […]

  19. Edward P says:

    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.

  20. Miriam says:

    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?

  21. Andy says:

    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.

  22. Ted says:

    What do you think about the Post thumb plugin? http://theblemish.com/post-thumbs-plugin/

  23. Miriam says:

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

  24. David says:

    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/

  25. […] my previous post on using thumbnails with WordPress’ custom fields feature, I explained a way to change where WordPress saves images and files you upload from the […]

  26. […] Talvez um novo plugin traga vida nova a sua p?gina principal. Um plugin, por exemplo, que crie thumbnails dos artigos. Que tal? Gostou? Veja mais sobre ele aqui. […]

  27. […] Giving Each WordPress Post Its Own Thumbnail (tags: wordpress CMS plugins webdesign blogs) […]

  28. […] WordPress Plugins: Giving each WordPress post a thumbnail, and display the thumbnail on the home pag… – You may encounter situations where you need to automatically display a thumbnail or image of some kind that will link to posts. […]

  29. Julian Johannesen says:

    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.

  30. Miriam Schwab says:

    You’re very welcome Julian! Stick around and I hope you’ll find more useful stuff here.

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

  32. Miriam Schwab says:

    Brady – that is an amazing plugin that  you’ve mentioned! I’m going to have to look into it further.

  33. 25 ??????????? ????? ??? WordPress…

    ???????????? ???????? ? ????? — ????????? ??????? ???????? ? ????? ?????? ?????, ??????? ????????; ??????????.
    ?????? ???????????? — ??…

  34. […] Thumbnail para posts. Outro hack muito útil para portais, ou revistas digitais. […]

  35. […] Giving each WordPress post a thumbnail, and display the thumbnail on the home page | WordPressGarage… (tags: wordpress howto) This entry was written by del.icio.us and posted on January 25, 2008 at 10:25 pm and filed under Url. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. « more webbish screwing around […]

  36. […] Giving each WordPress post a thumbnail, and display the thumbnail on the home page – […]

  37. Kotsengkuba says:

    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.

  38. […] Giving each WordPress post a thumbnail, and display the thumbnail on the home page (Source: WordPress […]

  39. […] Giving each WordPress post a thumbnail, and display the thumbnail on the home page (Source: WordPress […]

  40. […] Giving each WordPress post a thumbnail, and display the thumbnail on the home page (Source: WordPress […]

  41. […] Giving each WordPress post a thumbnail, and display the thumbnail on the home page | WordPressGarage… Attribuer des images pour la page d’accueil (tags: wordpress plugins thumbnail billet resources blogging themes) lnt_content.add({author:”admin”,author_id:”1″,author_url:”http://www.bertrand-soulier.com”,author_nickname:”admin”,cid:”http://www.chroniquesduweb.com/2008/03/16/links-for-2008-03-16/”,nid:”lnt_cid_0″,type:”post”,tags:”clermont-ferrand “,cp:”1″}); Tags : clermont-ferrand […]

  42. […] labelled “Recent Posts” or something of that sort. Usually such posts will have a small thumbnail image, square or otherwise. These thumbnails only appear (depending on the theme you’re […]

  43. […] Giving each WordPress post a thumbnail, and display the thumbnail on the home page by […]

  44. […] (Source: Automattic.) 113. Cloaking to Stop Scraping. 114. Server load button for blogs. 115. Giving each WordPress post a thumbnail, and display the thumbnail on the home page. 116. How to create overlapping tabs. 117. How to Optimize Your WordPress Title. 118. Blocking Your […]

  45. Tim says:

    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.
    :)

  46. […] Themes (Source: Automattic) 113. Cloaking to Stop Scraping 114. Server load button for blogs 115. Giving each WordPress post a thumbnail, and display the thumbnail on the home page 116. How to create overlapping tabs 117. How to Optimize Your WordPress Title 118. Blocking Your […]

  47. […] it more enjoyable for readers. As we’ve discussed here in the past, an efficient method for adding thumbnails to your blog is with custom fields. But finding the right image, resizing it (ugh), uploading, etc., is such a pain in the neck that I […]

  48. […] Themes (Source: Automattic)113. Cloaking to Stop Scraping114. Server load button for blogs115. Giving each WordPress post a thumbnail, and display the thumbnail on the home page116. How to create overlapping tabs117. How to Optimize Your WordPress Title118. Blocking Your […]

  49. […] Garage recently wrote a post explaining how any WordPress user can do this entitled Giving each WordPress post a thumbnail, and display the thumbnail on the homepage.  I recommend checking this out if you are interested in setting something like this up on […]

  50. […] Create thumbnails for each blog post and displays them […]

  51. sam rohn says:

    Post-Thumb Revisited, a free wordpress plug in will automatically thumbnail post images as well –

    http://www.alakhnor.com/post-thumb/

  52. lihuawei says:

    Very good I like, thanking !

  53. Guillermo Scharffenorth says:

    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.

  54. Miriam Schwab says:

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

  55. […] Create thumbnails for each blog post and displays them […]

  56. […] Create thumbnails for each blog post and displays them […]

  57. […] Crear thumbnails (miniaturas) de una imágen de cada post y mostrarla, ver cómo. […]

  58. […] Crear thumbnails (miniaturas) de una imágen de cada post y mostrarla, ver cómo. […]

  59. […] Crear thumbnails (miniaturas) de una imágen de cada post y mostrarla, ver cómo. […]

  60. […] 14. Giving Each WordPress Post a Thumbnail, and Display the Thumbnail on the Home Page […]

  61. […] Giving each WordPress post a thumbnail, and display the thumbnail on the home page ( Sursa: WordPress […]

  62. […] Gerando uma miniatura de cada texto do WordPress e mostrá-lo na página inicial (Fonte: WordPress […]

  63. […] Crear thumbnails (miniaturas) de una imágen de cada post y mostrarla, ver cómo. […]

  64. […] Resalta los comentarios de los autores […]

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

  66. […] Crear thumbnails (miniaturas) de una imágen de cada post y mostrarla, ver cómo. […]

  67. […] 7. Create thumbnails for each blog post and displays them […]

  68. […] Giving each WordPress post a thumbnail, and display the thumbnail on the home page | WordPress Garag… et_post_custom_values […]

  69. Raymond says:

    Thank you for this article. It worked for me and I will implement the custom thumbnails on my redesign.

  70. Miriam Schwab says:

    @Raymond: You’re very welcome! I’m glad this tutorial helped!

  71. bryan says:

    can you tell me where to put da code?

    im having problem just with it, cuz u didnt explain where to put da code~

  72. zech says:

    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?

  73. […] 8. Giving each WordPress post a thumbnail […]

  74. AvenuEmpire says:

    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!

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

  76. Ryan says:

    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?

  77. […] I randomly picked WordPressGarage.com after noticing a promising […]

  78. […] (Source: Automattic.) 113. Cloaking to Stop Scraping. 114. Server load button for blogs. 115. Giving each WordPress post a thumbnail, and display the thumbnail on the home page. 116. How to create overlapping tabs. 117. How to Optimize Your WordPress Title. 118. Blocking Your […]

  79. […] Crear thumbnails (miniaturas) de una imágen de cada post y mostrarla, ver cómo. […]

  80. Abdel Faiz says:

    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

  81. […] websites to help attract traffic to these posts by the use of images. WordPressgarage has an interesting tutorial on creating thumbnails for each post on your blog and using Custom Fields to add and display them on […]

  82. […] (Source: Automattic.) 113. Cloaking to Stop Scraping. 114. Server load button for blogs. 115. Giving each WordPress post a thumbnail, and display the thumbnail on the home page. 116. How to create overlapping tabs. 117. How to Optimize Your WordPress Title. 118. Blocking […]

  83. […] (Source: Automattic.) 113. Cloaking to Stop Scraping. 114. Server load button for blogs. 115. Giving each WordPress post a thumbnail, and display the thumbnail on the home page. 116. How to create overlapping tabs. 117. How to Optimize Your WordPress Title. 118. Blocking Your […]

  84. […] (Source: Automattic.) 113. Cloaking to Stop Scraping. 114. Server load button for blogs. 115. Giving each WordPress post a thumbnail, and display the thumbnail on the home page. 116. How to create overlapping tabs. 117. How to Optimize Your WordPress Title. 118. Blocking Your […]

  85. […] Create thumbnails for each blog post and displays them […]

  86. Vardis says:

    Nice work –well done!

  87. […] make it more enjoyable for readers. As we’ve discussed here in the past, an efficient method for adding thumbnails to your blog is with custom fields. But finding the right image, resizing it (ugh), uploading, etc., is such a pain in the neck that I […]

  88. […] Giving each WordPress post a thumbnail; displaying it on the home page – . […]

  89. […] a lot of tutorials available online to add a custom field to your pots. This one is good in my opinion, so you should read it if you don’t know how to define a custom […]

  90. […] Giving each WordPress post a thumbnail, and display the thumbnail on the home page (Source: WordPress […]

  91. Sarah says:

    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!

  92. Ryan says:

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

  93. […] 25. Giving each WordPress post a thumbnail, and display the thumbnail on the home page(Source: Wordpress Garage) […]

  94. […] (Source: Automattic.) 113. Cloaking to Stop Scraping. 114. Server load button for blogs. 115. Giving each WordPress post a thumbnail, and display the thumbnail on the home page. 116. How to create overlapping tabs. 117. How to Optimize Your WordPress Title. 118. Blocking Your […]

  95. Phil says:

    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?

  96. […] Create thumbnails for each blog post and displays them […]

  97. dave says:

    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/

  98. […] Giving each WordPress post a thumbnail, and display the thumbnail on the home page (Source: WordPress […]

  99. eric says:

    thanks for it. very useful information

  100. Shaz says:

    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?

  101. […] (Source: Automattic.) 113. Cloaking to Stop Scraping. 114. Server load button for blogs. 115. Giving each WordPress post a thumbnail, and display the thumbnail on the home page. 116. How to create overlapping tabs. 117. How to Optimize Your WordPress Title. 118. Blocking Your […]

  102. semblance says:

    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.

  103. […] 36. How to Display the Thumbnail for Each Post on the Home Page […]

  104. i follow this  and place thumbnail with my posts. i really appreciate you.

    thx

  105. […] Create thumbnails for each blog post and displays themHow to create thumbnails for each blog post, use them anywhere you want, make your post more interesting. […]

  106. […] Thumbnails für Beiträge: englisches Tutorial, wie man jedem Beitrag ein Vorschaubild zuweist und diese Bilder auf der Startseite anzeigt. […]

  107. […] Create thumbnails for each blog post and displays them […]

  108. […] 7.Create thumbnails for each blog post and displays them […]

  109. […] Giving each WordPress post a thumbnail, and display the thumbnail on the home page […]

  110. […]  Giving any WordPress post the thumbnail, as well as arrangement the thumbnail upon the home page […]

  111. […] Create thumbnails for each blog post and displays them […]

  112. […] Create thumbnails for each blog post and displays them […]

  113. […] labelled “Recent Posts” or something of that sort. Usually such posts will have a small thumbnail image, square or otherwise. These thumbnails only appear (depending on the theme you’re […]

  114. […]  Giving apiece WordPress place a thumbnail, and pass the thumbnail on the bag page […]

  115. […] Giving each WordPress post a thumbnail, and display the thumbnail on the home page (Source: WordPress […]

  116. […] Giving each WordPress post a thumbnail, and display the thumbnail on the home page […]

  117. […] 3. How to Display the Thumbnail for Each Post on the Home Page […]

  118. […] Giving each WordPress post a thumbnail, and display the thumbnail on the home page […]

  119. […] Create thumbnails for each blog post and displays them […]

  120. […] Create Thumbnails For Each Blog Post And Displays Them […]

  121. […] Create thumbnails for each blog post and displays them […]

  122. […] Create thumbnails for each blog post and displays them […]

  123. EchoBlogger says:

    I like 4 ways that help to show the post thumbnails in the WordPress blog
    http://www.echoblogger.com/wordpress/wordpress-related-posts-thumbnails/

  124. user says:

    this shit is not working for me. :P :(

  125. Ryan says:

    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/
     

  126. […] 8. Giving each WordPress post a thumbnail […]

  127. FAQPAL Blog says:

    […] Source… […]

  128. Sam Rohn says:

    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
     

  129. […] Resalta los comentarios de los autores […]

  130. nana says:

    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!

  131. […] websites to help attract traffic to these posts by the use of images. WordPressgarage has an interesting tutorial on creating thumbnails for each post on your blog and using Custom Fields to add and display them on […]

  132. Sushant says:

    waiting for a stable wordpress version which supports thumbnails in core.

  133. Ryan says:

    @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/
     

  134. eONs says:

    The version 2.9.1 has release.Hope it meet what you want and required. :)

  135. Ed says:

    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

  136. Cool! ive been searching this for a week! thanks!

  137. […] Giving each WordPress post a thumbnail, and display the thumbnail on the home page […]

  138. joudie kalla says:

    Is there something like this for blogger? I am trying to get a thumbnail only with link to relevant post instead of thumbnail with text. It just looks s omuch better and i am going crazy to try and find it. Something like on this website i came across called http://www.noobcook.com. Can you let me know how i can do this for blogger.
    Thank you

  139. great and good for wordpress i learn more tip at this site

  140. Meru Mir says:

    Thank you very much for this article. I just have installed WP on my site and want to customize it, but it is very hard to me to understand all this php related stuff. So big thanks from a dummie! (:

  141. […] How To Display The Thumbnail For Each Post On Homepage […]

  142. Hi Miriam, you have very impressive blog, I really inspiring from your blog post. Your bookmarking Icons section pop-up totally outstanding. Could you please help me out about this? How can i make one like this?  Are you using any plugins  for this? And also for email subscription top right corner.  You can reply on my email.  

  143. velo says:

    great idea, i had implement in my site.
    Thank you very much

  144. How to generate thumbnail if image from external hosting ?. I want to configure it with popular post.

  145. @Squadro Solutions .. The plugin is called Sexy Bookmarks. You can find it here:
    http://wordpress.org/extend/plugins/sexybookmarks/
    Moving on from that, I’m glad WordPress has now brought its post-thumbnail feature.

  146. THis is really good code but i have a question
    that what if i want to load posts randomly and i want to load only those posts which have custom field entered in it
    suppose i write this
     
    query_posts(‘orderby=rand&showposts=1&cat=199′);
     
    now what to add in the above query that will load only those posts which have custom field in it
    See my blog, featured home slider, i have done a little bit on it but i am not satisfied with the query i used
    http://www.TodaysBollywood.com
    Code Site
    http://www.vaseemansari.com/blog/

  147. Mayur says:

    Thanks for this, but my theme already has the thumbnail feature, so i don’t think i need to do the extra coding part. I am just searching for what to enter in custom fields boxes for thumbnails to show up.

  148. @Mayur … you wouldnt need to use custom fields to display if the thumbnail feature is already enabled. You need to use the ‘the_post_thumbnail()’ function to display.  Check the WordPress website for more information

  149. StenvenBe says:

    Use  current plugin thumbnail is better in my mind

  150. redlex says:

    After following this tutorial, I couldn’t get a couple of things to work. The permalinks will not work with the register_post_type() and arrays outlined in a function; I simply removed this and permalinks worked fine

  151. GengWP says:

    another alternative plugin is thumbnail-for-excerpts. easy to configure

  152. Peter says:

    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/

  153. Kpop Flash says:

    another great related post plugin is nRelate. I’m sure it will be great! thanks for the tutorial :)

  154. cesi says:

    php 5.3.2 is  installed on my host server, i cant succes , any body can help ? thank you

  155. It works! Done well. Thanks for your code tutorial. This make me happy. Finally found it. Regards.

  156. Mark says:

    I use the theme which does it itself but is great to know whats behind it

  157. Awais Raza says:

    HI Dear i don’t want to show thumbnails when post opened…….

  158. […] Giving Each WordPress Post A Thumbnail, and Display the Thumbnail on Your Homepage […]

  159. Wasim says:

    Hello out thre i am working with the boldy theme ..
    i have four columns n the front page n i wanna show the thumbnil there will this code woudl wro for this or not 

  160. trying to create thumbnails on home page but not have lots of success. Will try this
    Thnx

  161. ??"? ??????? says:

    cool posy Miriam, thanks for sharing this greate guide. I just look for this.

  162. this is a very helpful post, i already included it on my bookmark thanks

  163. […] 8. Giving each WordPress post a thumbnail […]

  164. i have always wanted to know how to do this, this is great for showcasing work on a wordpress theme thanks very much for sharing this vital tip.

Leave a Reply




If you want a picture to show with your comment, go get a Gravatar.

More in Code Snippets, Tips (76 of 126 articles)