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.
Composition & Framing in Photography
9 Easy Usability Improvements for Blogs
October’s Tutorial Roundup
Enhance Graphics with Easy Depth of Field
Awesome tut! Been looking wondering how to include thumbnails for posts in a non-clunky way
Check out this WordPress plugin if you need thumbnails, but don’t want to mess with custom fields:
http://wpforsale.com/premium-wordpress-plugins/automate-thumbnails-in-wordpress-like-magic/
great.this is very helpful to me.thanks a lot david
Ronald
I received an error when adding a new custom field. Am using wordpress 2.6.1.
The message keeps saying “An unidentified error has occurred” I guess I’ll give up for now.
@Maxene: Sounds like an error with your database, or possibly with your Wordpress installation Maxene. Perhaps reinstall it?
thats funny. I just did an automatic upgrade to Wordpress 2.6.2 today. Same Error. Is there like a hack I need to learn to enjoy this feature? I’m a very nervous person when I see other blogs leaving me in the dust. anyways what do you think I should do? Don’t say Google! My wrist is tired from searching all day.
Simple, yet effective!
FYI <<– Newb here -
I was able to get the image to work but how would you style it i.e. center, padding, etc.
I tried using .thumbnail
@Straderade: That would involve the use of CSS. If you’re familiar with CSS already, you could do something like this in your stylesheet:
.thumbnail {
padding:20px;
border:3px solid #000;
}
etc…
And then add that class to your image tag in your layout code:
<img class=”thumbnail” src=”<?php echo $Thumbnail;?>” />
Ah, I’ve been looking for ages on how to do this and all along it’s been sitting right here
Thanks Dave!
cool tutorial…i had a question…
i want to show image1.jpg if $Thumbnail was empty. what is the code for it?
Thanks David for this cool tuto.
i do all steps descriped in this tuto, but when i publish my post, i get a big image not small.
hope you can help me.
have a nice day
Is there anyway to hide the text for the $thumbnail. I just want the thumbnail to show next to the other meta-tags. See HERE.
For clarity purposes, this is the coding I’m currently working with
<img src="ID,"Thumbnail", true);?>"" style="float:right; margin: 15px 0 auto 0;" height="125px" ;/>
Very interesting site ! Good work ! Congratulations :),
I love you so much! Great place to visit!,
Grant you just made yourself something to do with it,
Hi David,
thanks a lot for your tutorial.
Is there any way to set a default thumbnail (url) if we use the custom fields?
Thanks again
Chris
Very easy to understand. Thanks.
Hi,
Great tutorial, thanks!
I have used the cod and it works fine but all of a sudden i can only view the image on the full post page. The code is identical in both index.php and single .php
any suggestions?
Hey tried editing the code in the index file, added the custom fields “thumbnail” and could not seem to get it to work. I want to be able to attach seperate thumbnails to each post I create above the heading of each post. Here’s my url
http://www.criticalspeech.com
Am I missing something?
thanks for this info…
First of all, thanks a lot for the great work you have done in this site. It is really helpful.
I would like to know how could I add thumbnails to my related posts. Just like you did here. I know this is like a TOP SECRET for some people, but the same was with the latests posts thumbnails. I’m really, really needing that option for my site.
If you could give me any help, name of a plugin or a clue of something a could use to get it done I will appreciate it.
Thank you very much for everything.
GOD bless…
Maxene,
Did you manage to find the solution to your problem?
I’m having the same problem here and I’m at my wits end.
Any help is much appreciated. Thanks.
@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.
I found a way using “in_category”, but it only shows the the posts that are in the same category. Anyway, I think I’ll use that for the moment until you finish the tut.
Thanks a lot again.
Really nice tutorial