How to Add WordPress Post & Page Thumbnail Support
Since WordPress v2.9, posts began supporting a new feature called post thumbnails. This feature allows you to specify an image that appears automatically next to your blog post.
Of course, your theme needs to support this (ours do so you don't need to do anything) before it will work.
Here's how you'd enable support:
Edit your functions.php file and paste in the following code:
PHP Code:
<?php
// enable this theme to use post and page thumbnails
add_theme_support('post-thumbnail', array('post', 'page'));
// set the default size of the post/page thumbnails to 100px x 100px
the_post_thumbnail(array(100,100));
?>
That basically tells your theme to support the thumbnail option on both posts and pages with a css class of "post-thumbnail" and size it to 100x100. Now when you go and create or edit a new post, you'll see the following addition in your sidebar:
post-thumbnail.jpg
Click on the "Set featured image" link and upload the image you'd like to use as your thumbnail. Save and preview your post. Chances are you won't see the thumbnail yet because we haven't told your theme to call it.
You'll need to edit your loop.php or index.php file and find the
have_posts loop code. Within the loop, you'll need to paste in the following right BEFORE
the_content() code.
PHP Code:
<?php
if (has_post_thumbnail()) {
the_post_thumbnail('post-thumbnail');
}
?>
This tells your site that if a post thumbnail exists, then display it before the content.
Now when you preview the blog post, you should see the thumbnail. It might not be positioned correctly because you haven't styled it yet. Here's the style I usually add.
You will need to edit your style.css file and paste in the following:
Code:
img.attachment-post-thumbnail{
float:left;
padding:5px;
margin:15px 15px 5px 0;
border:1px solid #CCC;
width:auto;
}
That should now make your thumbnail float to the left of your post text and display nicely with a small light gray border.
Now you know how to setup your theme and support post thumbnail images. For the full details of the WordPress function, see the Codex entry for
the_post_thumbnail().
Last edited by dcowgill; December 27th, 2010 at 01:25 AM.
Reply With Quote