How to display post thumbnail in WordPress – 2nd alternative

Logo WordPress

Ok, previously I already write a short tutorial on how to display post thumbnail on blog posts, and now we will go through the 2nd alternative on how to do that in different way.

For now the trick is using WordPress custom field and with a few line of code on our theme file. Personally, I love WordPress custom field, its so flexible and the possibility of ways to use it are endless. Just limited by your imagination.

To start, we’ll look on what and where is the custom field. take a look at screen shot below:

customfield

As you can see, this is a custom fields form. Located at below of your post content editor with “Custom Fields” on its title. So what is Custom fields and how we’ll use it to display our post thumbnail?

WordPress has the ability to allow post authors to assign custom fields to a post. This arbitrary extra information is known as meta-data.

– source : http://codex.wordpress.org/Custom_Fields

Is above statement is too techy for you? Ok, here are the analogy : Custom Fields is just a place or box owned by every post, and you can put text in it, this text could be your name, favorite foods, Url, email address etc. This will be an attributes of the post wherever its going or called or displayed. The cool part of custom field is a post can have unlimited number of custom field/attribute and once you assign a custom field/attribute to a post, this attribute will be available for all posts.

Now let see it in action, the trick is we will put a link to your thumbnail image in this custom field, then when we create a post loops we’ll also pull off  this Url from post’s custom field and use the Url to display our image. Quite simple huh..?

Create Custom Field from Post editor

Here are the steps to assign a custom field to a post, we will assign a custom field to the post and lets name it “thumbnail” as we’ll store our thumbnail Url in here so just give it a meaningful name.

create-customfield

Next you will see your custom field listed, and you may edit it or even delete it. See below:

custom-success

That’s it. Now our post has a custom field in it and ready to be called from our theme file, but before we are going into that, you may ask “How do I add custom field for my next post?”, its just as simple as pick it up from the list, put the thumb image url and Add it.

availble-custom-field

As I said earlier, once we create a new custom field for a post then the custom field will be available for every post, we just need to select it, fill its value and save it. Really simple process.

Display it to the world

Ok now its time to display it. We will need to add  few line of code into our theme file. And here are how we call these custom field from template file. Just a simplified version of actual post loop.

<?php
//for example : this is our index.php file in theme folder
if(have_posts()):
while(have_posts()):
the_post();
$thumb = get_post_meta($post->ID,'thumbnail',true);
the_title(); //display post title
echo '<img src="'.$thumb.'" alt="thumbnail"/>'; // display our thumbnail image
the_content(); //here are our content
endwhile;
endif;
?>

The most important part is get_post_meta() function, this function is used to pull of custom field owned by current post.

It takes three parameters, the 1st is post ID, the 2nd is name of our custom field name and the 3rd is a TRUE or FALSE value. If we set it to TRUE, the function will return a single custom field value from post, and if we set to FALSE the function will return an Array of custom field if  post contain more than one custom field. Since we just need “thumbnail” custom field, so we set it to TRUE.

For more information about get_post_meta() function you can read the detail from WordPress documentation.

Thats the todays tutorial, I hope you enjoy it.

2 Replies to “How to display post thumbnail in WordPress – 2nd alternative”

Leave a Reply

Your email address will not be published. Required fields are marked *