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. 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
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 Custom Fields.
Wordpresscreme Custom Fields Screen
The image above is the WordPressCreme Custom Fields, we use for SEO in all post, we put Title, Description, and Keywords for use in single post.
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.
Finally 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);?>" />
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.
Thanks to Tutorial9.net
Now this is something that wordpress has to work out better in a new release. It can be that difficult to show a simple thumbnail in a post. There should be a simple checkbox that says “show thumbnail with excerpt” or something like that.
I tried the custom fields, but it turned out to be really painfull and not practical when posting lots of articles. So, searching around i came up with a simple function that makes it a lot more easy.
Here it is:
function showThumb() {
global $post, $posts;
$idPost = $post->ID;
ob_start();
ob_end_clean();
//$images = get_children(‘numberposts=1&post_parent=’.$idPost.’&post_type=attachment&post_mime_type=image’);
$images = get_children( array(
‘post_parent’ => $idPost,
‘post_type’ => ‘attachment’,
‘post_mime_type’ => ‘image’,
‘orderby’ => ‘menu_order ASC, ID’,
‘order’ => ‘ASC’)
);
if ($images) {
$images_data = array_keys($images);
$image = wp_get_attachment_image_src($images_data[0], ‘thumbnail’);
$thumb = $image[0];
} else {
$thumb = bloginfo(‘stylesheet_directory’).”/images/thumb_default.jpg”;
}
return $thumb;
}
Ir works like this: First creates an array with all the attachments of your posts, orders it by position and retrieves de first one, so the first image in your post (your can set up the position when you add the picture, like when you create a galley) Now, if there are no attachments, then it returns the default thumb’s url.
The only thing you got to do now is place inside The Loop, and it will retrieve the thumbnail url. So you dont need to set up custom fields or anything like that.
But anyway, wordpress should really work something about this in some upcoming release.
Thanks!, is true, wordpress should really work to mitigate this, in upcoming realease
Thumbnail icon is coming bt thumbnail not.. plz help.. how the thumbnail will appear.
Thanks
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!
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.