Add Additional Image Sizes to Your Post Content Editor

WordPress automatically resizes images that are uploaded to the Media library using three default sizes –  Thumbnail size, Medium size, and Full size. You can see the sizes of images for your theme if you click on Settings > Media.

Many WordPress themes also add additional image sizes (or thumbnail images) that are used by the theme for specific pages (using the theme templates). For instance, Genesis child themes often add image sizes that are used for the home page to display post or page featured images.

Every image uploaded has these additional sizes (as long as the original image is large enough), but they are difficult to use in your page or post because they don’t appear in the editor.

This tutorial will show you two methods for adding these additional image sizes to your editor. I’m using the Genesis child theme – Executive Pro, which adds three additional image sizes – featured, portfolio, slider, but we’re only going to add two of the sizes.

This is the code in the Executive Pro theme that adds the three additional image sizes.

Method 1: Use a Plugin

You can install the WordPress plugin – Simple Image Sizes using Plugins > Add New. This plugin will add all your theme image sizes to your WordPress Admin; click Settings > Media to see them. There is a check box next to each image size “Show in post insertion” to add the size to your post editor.

Since these sizes are added by your theme, be sure not to edit any of the other settings for the images because the theme pages that use those sizes may not display correctly.

You may also use this plugin to add your own image sizes to your theme.

Method 2: Add Code to Your Theme Functions

Before editing your functions.php, you will want to make a backup, so that you can restore the original if something goes wrong. You may also add the code to a custom functions plugin.

Step 1. Find the Added Theme Image Sizes

In Executive Pro functions.php, you find a section near line 33 that adds the three additional image sizes.

//* Add new image sizes
add_image_size( 'featured', 300, 100, true );
add_image_size( 'portfolio', 300, 200, true );
add_image_size( 'slider', 1140, 445, true );

Step 2: Optional – Add a New Image Size

In the line add_image_size( 'portfolio', 300, 200, TRUE ):

• portfolio is the name of the new image size
• 300 is the image width in pixels
• 200 is the image height in pixels
• true means that the image is hard cropped, so it is exactly 300px by 200px

If you want to add another image size to your theme, you can just copy one of these lines and edit it. So you could add a new image size, like this:
add_image_size( 'new-post-image', 720, 9999, false );

• new-post-image is the image name (no spaces in the name)
• the width is 720px and the height can be as much as 9999px
• false means that there is no hard cropping

Step 3. Add the Theme Image Sizes to Post Editor

The next step is to add the following code to your functions.php or a a custom functions plugin. This is in the WordPress Codex; I’ve modified it, so I can explain it easier.

//* Add new image sizes to post or page editor
add_filter( 'image_size_names_choose', 'mytheme_image_sizes' );
function mytheme_image_sizes( $sizes ) {

    $mythemesizes = array(
        'featured'  => __( 'Home Size' ), 
        'portfolio' => __( 'Portfolio Size' ), 
    );
    $sizes = array_merge( $sizes, $mythemesizes );

    return $sizes;
}

For this example, I only added two of the three Executive Pro images – ‘featured‘ and ‘portfolio‘. I gave ‘featured‘ the name ‘Home Size‘, and ‘portfolio‘ the name ‘Portfolio Size‘ in the editor; you can choose any names you like for your images.

You can see how the add_image_size() are used to pair the added images with the ‘nice’ names that we assigned for the post editor below.

More Explanation

• image_size_names_choose is the WordPress hook (function) that you’re filtering or changing
• mytheme_image_sizes is your function that makes the changes
• $sizes is what we’re going to pass back to image_size_names_choose
• $mythemesizes is an array pairing each image size we added with a name we assign for the editor
• next we merge the original array $sizes with our new array $mythemessizes to create a new $sizes array
• and then we return the merged $sizes array, so that it’s passed to image_size_names_choose

If you also wanted to add the ‘new-post-image‘ from above, you can give it a name, such as ‘New Post Image‘ for the editor, and the complete code would look like this:

//* Add new image sizes to post or page editor
add_filter( 'image_size_names_choose', 'mytheme_image_sizes' );
function mytheme_image_sizes( $sizes ) {

    $mythemesizes = array(
        'featured' 	 => __( 'Home Size' ), 
        'portfolio' 	 => __( 'Portfolio Size' ), 
        'new-post-image' => __( 'New Post Image' ), 
    );
    $sizes = array_merge( $sizes, $mythemesizes );

    return $sizes;
}

Once your theme images are added to your page or post editor, you can use that size in any post or page.