WordPress has, in our opinion, always handled images beautifully. Part of the reason is the ease of use with its built-in feature ‘Post Thumbnails’ otherwise known as ‘Featured Images’. You can even take it a step further with the use of the built-in function ‘add_image_size()’ in order to specify custom image sizes as well as the option to crop. When used properly both of these core built-in functions will help avoid the need for third-party plugins when adding custom image sizes. In this tutorial we will teach you how to add and use custom image sizes in WordPress using built-in functions.

Step 1: Add Theme Support for Post Thumbnails (Featured Images)

In the first step of this tutorial we will add theme support for post thumbnails otherwise known as featured images using the built-in feature ‘Post Thumbnails’. Simply open your functions.php file then copy and paste the code below. You will now be able to add post thumbnails using the built in media settings.

PHP

if ( function_exists( 'add_theme_support' ) ) { 
    add_theme_support( 'post-thumbnails' );
}

Step 2: Add a Custom Image Size using the Built-in Function add_image_size()

In the next step of this tutorial we will add the built-in function ‘add_image_size()’ to our initial code from Step 1 in order to add custom image sizes. You will need to reference the ‘Items to Note’ below in order to adjust the 4 arguments to suit your needs.

PHP

if ( function_exists( 'add_theme_support' ) ) { 
    add_theme_support( 'post-thumbnails' );	
    add_image_size( 'name', width, height, crop );
}

Items to Note (add_image_size() Arguments):

• Name: This is a required argument where you just need to give it a unique name in order to call your custom image size later, make sure you keep it inside the quotes.
• Width: This is an optional argument for the max width of the image.
• Height: This is an optional argument for the max height of the image.
• Crop: This is a boolean (true/false) argument that will either hard crop or soft crop the image. The default (false) is set to soft crop which basically only resizes your image proportionality within the dimensions you specify. The hard crop will basically cut the image to a predefined shape and size based on your dimensions, in order to achieve a hard crop set the argument to true.

Example with Actual Arguments

add_image_size( 'cropped-img', 800, 600, true );

Step 4 (Optional): Resize Images Previously Uploaded to WordPress using the ‘Regenerate Thumbnails’ Plugin

This final step is optional but is also necessary if you want to apply your custom image size to any images that have been uploaded to your WordPress install prior to the addition of adding these built-in image functions. If you choose to skip this step, then your custom image size will only be applied to any new images uploaded to WordPress. This is made easy by using the plugin called ‘Regenerate Thumbnails’.

Download the Plugin (WordPress Plugin Directory)

Items to Note:

• Install and activate the plugin.
• Visit the plugin’s settings page in the WordPress Dashboard, Tools > Regen. Thumbnails
• Click the button ‘Regenerate all Thumbnails’ to resize all images uploaded to your WordPress installation.

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.