Design & Development Blog

The key to a great blog is to use image thumbnails. There are a few WordPress plugins available but non of them get the job done right… untill now!

Introducing WP Post Thumbnail

This WordPress plugin doesnt just save and display a thumbnail, its jam packed with features!

• Create 3 thumbnail sizes to use throughout your website (different sizes for blog and footer etc)
• use a jquery jcrop tool to crop your 3 thumbnails just right from 1 original picture (no stuffing around in Photoshop)
• WP Post Thumbnail integrates with the Post-Plugin Library and all its widgets (display thumbnails in latest / popular posts widget!)
• Call thumbnails from your WordPress theme with ease.

Installing WP Post Thumbnail

	IMPORTANT! Do not search and install this plugin via the WordPress plugin “Add New” page. The current version listed on the WordPress database is 1.8. This version is very buggy but they have released a new beta that works perfectly!
	Step 1: Download Download the WP Post Thumbnail plugin here: Download WP Post Thumbnail Plugin. You can also visit the Plugin website here to read official documentation
	Step 2: Install Extract the WP-Post-Thumbnail Folder from the .zip and copy the WP-Post-Thumbnail Folder to your plugin folder (wp_root/wp-content/plugins).
	Step 3: Activate Login to your WordPress dashboard, then navigate to Plugins » Installed. Scroll down to WP Post Thumbnail and click activate.

Defining the 3 Thumbnail sizes

To edit or update the Thumbnail sizes, click on Settings » WP-Post-Thumbnail. On this screen you can change the 3 thumbnail sizes (If you already have thumbnails, it will automatically re-crop them!). I advise you to name the 3 sizes “thumb-large”, “thumb-medium” and “thumb-small” for ease of use in your theme.

How do you create the thumbnails?

Either create a new post or edit an old one. The Steps are quite easy:

1. Select your thumbnail size (its good to make thumbnails for all sizes)
2. Select an image from the library and use jcrop to crop your image
   
3. Save your new thumbnail.

So how do i get it to show up in theme?

Its very easy. Just copy and paste this code into your theme where you want the thumbnail to appear. This code shows the “thumb-large” thumbnail and links to the post.

<?php if ( function_exists( "$Wppt->get_post_thumbnail" ) ) {
    $thumb = $Wppt->get_post_thumbnail( $post->ID, 'thumbnail-custom-key-name' );
    if ( !empty( $thumb ) ) { ?>
        <a href="<?php echo get_permalink($post->ID); ?>" title="<?php echo $post->post_title; ?>"><img class="thumbnail" src="<?php echo $thumb['url']; ?>" title="<?php echo $thumb['title']; ?>" alt="<?php echo $thumb['alt']; ?>" width="<?php echo $thumb['width']; ?>" height="<?php echo $thumb['height']; ?>" /></a>
    <?php }
} ?>

That’s all great for posts, but what about pages?

WP Post Thumbnail is a great Plugin to display thumbnails for your posts, but what about your pages? I have hacked the plugin to make it usable with pages (this is great for a portfolio).

1. Open the file wwpt.php in the root folder of this plugin.
2. scroll down to line 205. You should be at a function called “admin_header_css”.
3. change the first if statement to this:

   if ( $pagenow == 'post.php' || $pagenow == 'options-general.php' || $pagenow == 'post-new.php' || $pagenow == 'page.php' || $pagenow == 'post-new.php') {

4. change the seccond if statement to this:

   if ( $pagenow == 'post.php' || $pagenow == 'post-new.php' || $pagenow == 'page.php' || $pagenow == 'post-new.php') {

5. Now scroll down to line 227 and replace the 2 if statements there as well.

Conclusion

That’s It! wp-post-thumbnail is a great plugin for complete control over your thumbnails. Have fun.