How to Add Thumbnails to WordPress 3 with Custom Fields

| July 24, 2011 | 1 Comment

custom fields

Add Thumbnails to WordPress Tutorial

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 this allow you to add extra pieces of data to individual WordPress posts that otherwise aren’t there by default.

What are custom fields?

A Custom Field allows you to enhance your WordPress posts by adding extra data which isn’t there by default. For example you could add such things as:

* Mood: Happy
* Watching: Tutorials
* Music: Michael Pop


STEP 1

Adding a Custom Field

First thing’s first you need to create your Custom Field. Start by Creating a New Post then scroll down till you come to the section Custom Fields.

Add Thumbnails to WordPress

We will be using the custom field name ‘thumbnail’. When you create your Custom Field just use anything as the value for now as we can change that later.

STEP 2
Creating the thumbnail

Now you have created your Custom Field it will always be available in a dropdown for all future posts. Next Find your index.php file and within that file locate the following lines of code:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php endwhile; endif; ?>

This is defined as the WordPress Loop. Any code inside that will equal to 1 post. For example if you have your blog to show 12 posts on the front page, the code within the if statement will repeat 12 times.
Within these lines insert the following code

<img src="<?php echo get_post_meta($post->ID, 'thumbnail', true); ?>" />

Now you have told WordPress to output the Custom Field thumbnail‘s data as the image source.

STEP 3
Upload your thumbnail

Now you have done that you will need to upload your thumbnail using the Add an image Icon at the top of the wordpress post.

Add Thumbnails to WordPress

You will need to copy the link URL and paste it into the custom field.And we are done! Now hit publish (or preview) to see the result.

Want thumbnails on some posts but others not?

Create a variable

Add this right after the loop starts:

<?php $thumbnail = get_post_meta($post->ID, 'thumbnail', true); ?>

This will store the value of the thumbnail custom field in a variable called $thumbnail.
Create a conditional statement

<?php if($thumbnail !== '') { ?>
    <img src="<?php echo $thumbnail; ?>" />
<?php } ?>

This will check to see if there is any data being put into the custom variable and if there is it will echo out the content’s within the statement. If there isn’t any data in the thumbnail custom field there will be no HTML output.

Tags: ,

Category: TUTORIALS

Comments (1)

Trackback URL | Comments RSS Feed

  1. Hello, i think that i saw you visited my web site so i got here
    to return the choose?.I am attempting to in finding things to improve
    my website!I guess its ok to use some of your ideas!!

Leave a Reply

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