WordPress 3.0 “Set Featured Image”

WordPress 3.0 video tutorial how to set “featured image” or add thumbnail to your post using default theme twentyten.

First when i click “set featured image” button, and refresh my blog, the thumbnail or image does not display and missing. This is because we have not called the function to display this image as your thumbnail yet.

So today, after i posted  how to install wordpress 3 a few days ago, i will share it with you how to display missing featured image. I was so excited to make the video! :) you can probably notice from my voice.

To display the thumbnail which is missing here are the steps:
1. In your admin dashboard, click one of your post to edit it. Scroll down until you find “set featured image”. This will bring media upload dialog box.

IF you use other theme, and you don’t have featured image menu as shown in above image, add this following code to your functions.php (WARNING: backup your functions.php incase you will get parse error!).
add_theme_support( 'post-thumbnails' );

If you have that already, go straight in step 2.

2. Browse the file from your pc, and click upload.
3. Once it is uploaded, scroll down, hit “set as featured image” button, and click “save all changes” then close the dialog box.
4. Next step, go to Appearance/editor/loop.php.
Open this loop.php file, copy all content and paste it in notepad++ or other html editor and find this line of code:
<?php the_content( __( 'Continue reading <span>&rarr;</span>', 'twentyten' ) ); ?>
Before that code, copy and paste this code:
<?php the_post_thumbnail();?>

The image after you paste the code above:

copy and paste it back to loop.php file. and do not forget to click “update file”
5. Now stylizing the thumbnail of wordpress 3.0 twentyten default theme by adding this code in the very bottom of style.css:
.attachment-post-thumbnail{width:200px; height:200px; padding:10px 20px 10px 0; float:left;}
Of course you can apply any styles to this css as you want.
6. Click “update file” and refresh your blog, the thumbnail or image should show up if you did all correctly.

Or watch this step by step video.

Share the knowledge
Share on Google+0Tweet about this on TwitterShare on Facebook0Pin on Pinterest0Share on Reddit0Email this to someonePrint this page