If you’ve switched Wordpress themes, the chances are that the new theme will use thumbnails of different dimensions. Sure, you can just plow ahead and use the old ill-fitting thumbnails, but that’s going to look ugly as you get a hodgepodge of differently sized thumbnails on a page.
But changing the thumbnails sizes–or, for that matter, the size of any image copy generated by Wordpress–is easy. Here’s how to do it.
Changing the Size of your Standard Thumbnails
By default, Wordpress gives you three image sizes you can customize. You access them in your Wordpress admin dashboard under Settings > Media. There you can set the dimensions of the basic image sizes that the Wordpress Media Library makes available. These are all generated when you upload a new image through the Media Library.
In the example here, you’ll notice I use 0 in the height field. That’s because I only want to control the width. It’s the way I prefer to handle a mix of portrait and landscape-oriented images so that they’ll always fit the full display widths of my theme. But in many cases, you might use a specific number where I’m using the 0.
Changing the numbers here and hitting Save Changes gets you halfway to where you want. If you want to resize existing thumbnails that have already been uploaded to your Wordpress site, you’ll want to skip further down this page to the Regenerate Thumbnails part.
Creating Multiple Thumbnail Sizes
Wordpress gives you three images sizes. But what if you need more than that?
On this site, for example, I have several different thumbnail sizes. If you take a look at the front page, I’ve got large thumbnails in the middle section and then smaller square thumbnails below that. I have another size for search results and archive pages. And then I have one that’s specifically for my RSS feeds so that it’s sized perfectly for use in my Mailchimp layout. And those are all separate from the Medium and Large sizes I use for images within a post. Sure, I could probably get by without these extra sizes, but each has a functional reason for being used. So why not?
There’s no setting in the Wordpress admin dashboard to do this. Instead, you add some code to one of the files of your theme. The file you’re looking for is functions.php. Under a normal Wordpress installation you’ll find it under /wp-content/themes/[theme name]/. Before editing this file, it’s a good idea to create a backup. If you make a mistake in this file, you’ll probably get a blank white screen when you try to open your site. It’s not permanent damage–just roll back the change to the backup version and it should pop right back. So a backup makes things much easier.
You want to open functions.php in a text editor. [Here’s some guidance if you need help with that.] The function that we’re going to add is the add_image_size.
You add a line like this to your functions.php file:
add_image_size( 'homepage-thumb', 270, 175, false );
Using this example, “homepage-thumb” is the name of the thumbnail. That can show up in several parts of the dashboard admin functions to help you identify one image size from another. It’s just a friendly name. In naming your sizes, there are some names you can’t use: thumb, thumbnail, medium, large, and post-thumbnail. Those are reserved by Wordpress for its own use in setting up the default image sizes.
The two numbers refer to width and height, in that order. In this case, it’s 270px wide and 175px high.
The “false” but sets the type of crop. Wordpress uses the terms “hard crop” and “soft crop” for these. Setting it to false will create a soft crop, which is also commonly known as a “fit” crop. It’s also known as a proportional resize, and it’s the purest form of resizing. The entire image is preserved but just in a different size. In the example here, it will put the entire image within a box that is 270px wide and 175px high. So you’ll see the entire image, but if your images are not the exact same aspect ratio as your soft crop box, you’ll end up with thumbnails displaying with different aspect ratios.
Setting it to “true” creates a hard crop. That’s also commonly known as a “fit” crop. That will use the entire space of the box, but if the aspect ratios (shapes) don’t match, it will cut off the section of the image that falls outside of the box. It’s like trying to print a rectangular photo on a square piece of paper.
There is also a third option–“array”–in which you can specify which region of the image gets cropped, such as top left or bottom right. By default, Wordpress focuses on the middle of the image. The array function is a bit more specialized; you can find the syntax for it here.
You can also just specify one dimension. For example:
add_image_size( 'homepage-thumb', 270 );
makes a thumbnail that is 270px wide and with no constraints on its height. So a vertical image that is very tall and thin might end up being 270px wide by 1000px tall.
If you want to add more than one thumbnail size to be generated, just add another line with the new settings. Something like this:
add_image_size( 'homepage-thumb', 270, 175, false );
add_image_size( 'search-thumb', 150, 150, true );
add_image_size( 'rss-thumb', 120, 80, false );
You can have multiple sizes here, although bear in mind that all of these are generated when you upload an image to Wordpress—so having a lot of them can slow down the upload process a bit. It also creates a separate image file for each size.
When you add these new sizes, they’re not going to magically appear in the drop-down menu list of options in the Media Library when you go to embed an image. To make that happen you have to add some more code to your functions.php file that looks like this (again, it’s a good idea to back up your working functions.php file before making the changes):
add_filter( 'image_size_names_choose', 'my_custom_sizes' );
function my_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
'homepage-thumb' => __( 'Homepage Thumb' ),
'search-thumb' => __( 'Search Thumb' ),
) );
}
The lines you change are the last lines of text. That’s where you specify the names of the new sizes you’ve used. On the left side of the line is the name you specified in the add_image_size code above. To the right is the name as it will appear in the drop-down menu. You can add more than one size by just adding an extra line, as I’ve done here to add both homepage-thumb and search-thumb sizes. Once you’ve done that and saved your functions.php file, these new sizes should appear as options in your Media Library when you go to embed an image. Here’s an example where I added a bunch of sizes when writing the Guide to Wordpress Image Crop Types page.
If you’re looking to set the size of the Featured Image (which used to be called the Post Thumbnail), there’s a dedicated function for that. It works in a similar way, and you can find more about it here.
Resizing Existing Thumbnails
So you’ve made all the changes, but your thumbnails are still showing up in their old sizes. That’s because resizing happens as part of the image upload process. So the new sizes will apply to all new images you upload. But chances are you’ve got hundreds, perhaps thousands, of thumbnails you want to resize to your new dimensions. That’s where the Regenerate Thumbnails plugin comes in.
This plugin forces Wordpress to recreate the thumbnails based on the current settings. It’s simple to use, and there are a few different options for getting it to do its thing. First, you just install it like any other plugin. Then you’ll get a new menu item in your Wordpress admin dashboard under Tools > Regen Thumbnails.
Read the warnings that come up at the top of the page, and once you’re happy with it, proceed by hitting the Regenerate All Thumbnails button. That’ll regenerate all the images on your Wordpress site. Depending on how many images you’re working with, it might take a while, but the plugin indicates its progress. It’s important to note that this is only applying to your resized images. It’s not touching your original images. There are ways to resize your original images (such as the Resize Image After Upload plugin), but the Regenerate Thumbnails plugin isn’t it (see below in the Related section).
While there’s no way to specify which thumbnail sizes to regenerate, you can specify which images to regenerate thumbnails for. You do that through the Media Library. If you’re not in the list mode, switch to that (the two icons at top right, one for thumbnail grid and the other for list view), and then you can select multiple images using their checkboxes. You can then use the Actions drop-down to regenerate thumbnails for the selected images. You can also do it on an image-by-image basis.
If you later decide to tweak the sizes again, you’ll need to go back and regenerate the thumbnails again. And once you’ve regenerated the thumbnails, there’s no need to keep the plugin active. If you want to deactivate or uninstall it, you can. Your newly regenerated thumbnails will continue displaying just fine.
Occasionally I’ll come across instances where the new sizes are not being regenerated properly for whatever reason. If you find that happening, you can try a less gentle plugin that does basically the same thing: Force Regenerate Thumbnails. Read the plugin’s warnings, though, because using it can cause some old images to be deleted.
There’s a Plugin for That
Most of these plugins are going to make changes to the thumbnails your site is already using. Please be sure to use them cautiously, read the developers’ warnings, and make a full site backup first.
The Regenerate Thumbnails plugin has been around for a long time and is generally very reliable. The Force Regenerate Thumbnails plugin does basically the same thing and is worth a look if the standard Regenerate Thumbnails isn’t working for you. And if neither of those work for you, take a look at AJAX Thumbnail Rebuild for another approach to rebuilding the thumbnails. It’s slow, but if the other plugins are stalling on your server, it might be worth a try.
There are also a couple of plugins that aim to be one-stop solutions to this process. The Simple Image Sizes plugin takes some of the legwork out the process by generating the functions.php code for you to copy and paste as well as built-in in thumbnail regeneration. Another one-stop solution is the Image Regenerate & Select Crop plugin. It’s new and hasn’t got much of a user base yet (and I haven’t tried it), but its feature set looks promising.
RELATED: If you’re looking to resize original images–not the resized versions that Wordpress automatically generates–here’s information on plugins that will do that. And if you’re using a lot of thumbnails and images in Wordpress, optimizing them with something like the EWWW Image Optimizer Cloud or one of the other image optimizer plugins for Wordpress can help speed up page load times for your site.
