How to Add Custom Images Sizes to WordPress

Last modified: June 17, 2020
You are here:
Estimated reading time: 1 min

By default, the WordPress media library stores all uploaded images in four different sizes. These include thumbnail, medium, large and full-size versions of the image. However, for certain websites, it can be important to have all images automatically resized to specific dimensions, and if this is the case, the default options may not always be suitable for your requirements. Adding a custom image size requires editing the Theme Functions file for your currently active WordPress theme. This file is called ‘functions.php’ and it is located in the theme’s root directory. Fortunately, you can easily edit the contents of this file from within WordPress itself rather than with a text editor or other separate program. The function you will be using to add custom image sizes is called “add_image_size”. The process is explained as follows:

 

  1. Log into your WordPress administrator dashboard, open the “Appearance” tab on the sidebar and click “Editor”. The Edit Themes page will open with the style sheet for the currently selected theme loaded.
  2. Scroll down the list of templates to the right to find “Theme Functions (functions.php)” and click on it.
  3. Scroll down to the bottom of the file and copy and paste the following code:

 

if ( function_exists( ‘add_image_size’ ) ) {

add_image_size( ‘custom-size’, 320, 160, true ); //(cropped)

}

add_filter(‘image_size_names_choose’, ‘my_image_sizes’);

function my_image_sizes($sizes) {

$addsizes = array(

“new-size” => __( “New Size”)

);

$newsizes = array_merge($sizes, $addsizes);

return $newsizes;

}

On the second line of this code, replace ‘custom-size’ with your preferred name for the new size, ensuring that you use dashes instead of spaces. Replace the two numbers after that with the dimensions in pixels for the new image size (width by height). To add additional image sizes, simply repeat the second line, entering the new details in the code.

 

  1. Click on “Update File”. If you entered the code correctly, a message should appear at the top of the page saying “File edited successfully”.
  2. When you add an image in a new or existing post, you will now see the new image size appear in the dropdown box beside “Size”. This custom size will only be available for new images which you upload to your WordPress media library.

 

You can learn more about the add_image_size function at codex.wordpress.org/Function_Reference/add_image_size.

Was this article helpful?
Dislike 0
Views: 18