How To Create Additional Thumbnail Sizes in WordPress Themes

written by William Patton on January 3, 2013 in WordPress Custom with one Comment

← older posts newer posts →

With the abundance of WordPress sites it’s easy to get lost in the samey-ness of the internet. Every site owner and blogger should want something that is unique to their site. That often means making something that is unique, something that works for the site or blogger, and adding it to their site.

Using Thumbnails to Make Custom Layouts and Page Templates

One of the best ways to make your site stand out in the crowd is by using custom templates for your pages that look good and function well. More often than not you’ll want to include some nicely aligned images in the layout somewhere, possibly in a featured posts section on your homepage or below your other posts on the single page. As WordPress is a dynamic CMS you’ll likely want to use images from your posts but the problem arises that the default thumbnail size isn’t the size you want. The default size of 150×150 might actually break your nice new template’s layout and using a re-scaled full size version wouldn’t be efficient so how do you fix it? By adding additional images sizes is how.

Why Would I Need More Thumbnail Sizes?

There are a lot of very good reasons why you’d want to create additional image sizes like a new or featured posts section, full width above the post title, related posts and many more. You may also want to style the posts individually so you might need to know how to add class to post_class().

Adding Thumbnail Support to Your Theme and Defining Image Sizes

First thing we need to do is add support for thumbnails to out theme (if your building from a recent existing theme then it’s probably already enabled). To enable thumbnail support is just a case of adding a single line to your functions.php file (if you have a Custom Functionality Plugin it’s still best to add this to the theme’s functions.php).

add_theme_support('post-thumbnails');

And then define your own sizes like so

add_image_size( 'sidebar-thumb', 120, 120, true ); // Hard Crop Mode add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode

Each size has a name to identify it followed by the width then the height but notice the true in first image size. That sets crop mode to Hard Crop over Soft Crop

Hard Crop, Soft Crop – The Difference

Hard Crop – This mode will crop off some of the image from either the top & bottom or left & right to make it match the defined size exactly.
Soft Crop – This mode will re-size the image to the closest match (usually matching the width) while retaining the original height ratio.

WPBeginner has a section detailing the differences between hard and soft crop in their own post about additional image sizes, which is where the above code snippets came from!

Using the New Image Sizes in Your Theme

You can call upon the new size of the featured image from your post using the_post_thumbnail() and telling it the name of the image size that you specified. Something like this:

<?php the_post_thumbnail('homepage-thumb'); ?>

But What About the Older Posts that Haven’t Generated the New Size

When you upload an image WordPress creates copies with the default (or your defined) sizes you need. That means that existing post images will not have the new sizes created as they were uploaded before you created additional image sizes. There’s a simple solution to that – regenerate your thumbnails. There’s a dozen or more plugins that can do this for you but some of them have timeout errors if you’ve got lots of images (or when your images are large, such as the message I received when regenerating just 37 in my test site!) so the plugin I recommend is AJAX Thumbnail Regenerate. As it uses AJAX it can give notifications on the fly without a page re-load letting you know it’s all working well and nothing’s gone wrong.

In Conclusion

Creating Additional Thumbnail Sizes in WordPress is such a handy piece of code to know when creating new themes, making them responsive or just jazzing up one of your existing pages. If you want any more help or advice feel free to leave a comment and let me know what your problem is and I’ll be happy to help.

PattonWebz