Envira Gallery Blog

Digital Photography Tips, Tutorials and Resources

how-to-add-custom-image-sizes-in-wordpress

How to Add Custom Image Sizes in WordPress (Step-by-Step)

by Waseem Abbas on Dec 1, 2016

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

add_image_size

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.

Search Plugin

Click on the Install Now button, and then click on the Activate button.

Activate Plugin

Once the plugin is activated, go to Tools » Regen. Thumbnails and click on the Regenerate Thumbnails button.

Regenrate Thumbnails

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.

Search Plugin

Go ahead and install and activate the Simple Image Sizes plugin.

Activate Plugin

Then, go to Settings » Media and check mark Show in post insertion.

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.

If you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.

Comments

  1. This is very cool. One question I have is if I add the extra image sizes as you suggest in step 2, will this then allow WordPress to choose which size to display based on screen resolution? If the site is responsive then the image size required would surely change for mobile, tablet and desktop. Apologies if this is too noob!

    1. Hello Charlie, thanks for liking the tutorial. If your theme is responsive, then WordPress will automatically adjust the images according to content’s width. 🙂

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.