Digital Photography Tips, Tutorials and Resources
Do you want to use custom image sizes in your WordPress theme? With custom image sizes, WordPress will automatically generate your custom defined thumbnails for every image you upload, so you don’t have to edit images manually. In this article, we will show you how to add custom image sizes in WordPress.
Sometimes your WordPress theme includes different thumbnail images sizes other than the default WordPress image sizes. In this case, defining custom image sizes will save you a ton of time manually editing every image thumbnail individually.
To add custom image sizes in WordPress, you’ll need to follow these 4 steps:
- Step 1. Register additional image sizes for your theme
- Step 2. Display custom image sizes in your theme
- Step 3. Regenerate your custom image sizes for previous images
- Step 4. Enable custom image sizes for your post content
Ready to get started? Let’s go!
Step 1: Register Additional Image Sizes For Your Theme
First thing you need to do is go to Appearance » Editor. Edit the functions.php file and add the following script:
add_theme_support( 'post-thumbnails' );
Hit the Save button. This will enable the support of post thumbnails, so you can use the built-in function add_image_size() to add your own custom image sizes.
Next, add your custom image sizes using the
function. Here are some examples:
add_image_size( 'post-thumbnail size', 800, 240 ); add_image_size( 'homepage-thumb size', 220, 180 ); add_image_size( 'fullpage-thumb size', 590, 9999 );
As you can see, we added a ‘post-thumbnail size’, ‘homepage-thumb size’, and ‘fullpage-thumb size’ to our theme. (These are just the names we chose to use, but you can use any names you want for your image sizes.)
Then, we designated the width and height. The first value is the width and the second value is the height for the image. Go ahead and customize these variables to whatever sizes you need for your particular theme.
Step 2: Display Custom Image Sizes in Your Theme
Now that you’ve added your custom image sizes, next it’s time to display those custom image sizes in your theme. Simply edit the theme file where you want to display your custom image sizes, and add the following code:
<?php the_post_thumbnail( 'your-specified-image-size' ); ?>
Change ‘your-specified-image-size’ to the name you assigned to your custom image size in the previous step. You’ll need to paste this code inside the post loop of your theme file.
Then, repeat this process for any additional image sizes that you want to display in your theme.
Step 3: Regenerate Your Custom Image Sizes For Previous Images
Even though you now have custom image sizes, these changes won’t effect any images that were previously uploaded to WordPress. So, you’ll need to go and regenerate those thumbnails.
The easiest way to do this is with a plugin like Regenerate Thumbnails. It will regenerate all of your thumbnails to the new image sizes.
Go to Plugins » Add New. In the search bar, type Regenerate Thumbnails. Then you will see the plugin.
Click on the Install Now button, and then click on the Activate button.
Once the plugin is activated, go to Tools » Regen. Thumbnails and click on the Regenerate Thumbnails button.
Now, all of your previously uploaded images will have thumbnails that are the correct dimensions.
Step 4: Enable Custom Image Sizes For Your Post Content
In the above steps, we added custom image sizes to our theme files. Now, we will apply these custom image sizes to post content as well, using the Simple Image Sizes plugin.
Simply go to Plugins » Add New. In the search bar, type Simple Image Sizes. The plugin will be displayed below.
Go ahead and install and activate the Simple Image Sizes plugin.
Then, go to Settings » Media and check mark Show in post insertion.
Make sure to click on the Update button after every custom size.
Now, your custom image sizes will be available for post content, so you can add photos into a post using your custom sizes.
That’s all. We hope this article has helped you to learn how to add custom image sizes in WordPress. You may also want to check out our guide on how to resize WordPress images automatically.