Adding a custom image size in WordPress can be useful when you want to have more control over the sizes of the images displayed on your website. This allows you to define specific dimensions for images that are different from the default sizes provided by WordPress.
To add a custom image size, you can use the add_image_size() function. This function takes three parameters: the name of the image size, the width in pixels, and the height in pixels. Here’s an example of how you can add a custom image size called “custom-size” with a width of 800 pixels and a height of 600 pixels:
function wpsnippets_add_custom_image_size() {
add_image_size( 'custom-size', 800, 600 );
}
add_action( 'after_setup_theme', 'wpsnippets_add_custom_image_size' );
In the example above, the add_image_size() function is hooked to the after_setup_theme action, which ensures that the custom image size is registered after the theme is set up. You can place this code in your theme’s functions.php file or in a custom plugin.
Once you have added the custom image size, you can use it in your theme or plugin by calling the the_post_thumbnail() function with the size parameter set to the name of your custom image size. For example:
the_post_thumbnail( 'custom-size' );
This will display the post thumbnail using the custom image size you defined.
Adding a custom image size can be useful when you want to have consistent dimensions for specific types of images on your website, such as featured images or gallery thumbnails. It allows you to have more control over the appearance of your images and ensures that they are displayed in the correct dimensions.
Examples
Example #1: Adding a Custom Image Size for Featured Images
This use case demonstrates how to add a custom image size for featured images in WordPress. The code example below adds a custom image size called “custom-featured-image” with a width of 800 pixels and a height of 400 pixels.
function wpsnippets_add_custom_image_size() {
add_image_size( 'custom-featured-image', 800, 400, true );
}
add_action( 'after_setup_theme', 'wpsnippets_add_custom_image_size' );
Explanation: The add_image_size() function is used to register a new custom image size. In this example, we specify the name of the image size as “custom-featured-image”, followed by the width and height dimensions. The fourth parameter, true, indicates that the image should be cropped to fit the specified dimensions. The add_action() function is used to hook the wpsnippets_add_custom_image_size() function to the after_setup_theme action, ensuring that the custom image size is added when the theme is set up.
Example #2: Adding a Custom Image Size for Post Thumbnails
This use case demonstrates how to add a custom image size for post thumbnails in WordPress. The code example below adds a custom image size called “custom-post-thumbnail” with a width of 600 pixels and a height of 300 pixels.
function wpsnippets_add_custom_image_size() {
add_image_size( 'custom-post-thumbnail', 600, 300, true );
}
add_action( 'after_setup_theme', 'wpsnippets_add_custom_image_size' );
Explanation: The code example is similar to Example #1, but the custom image size is intended for post thumbnails instead of featured images. By using the add_image_size() function with the appropriate dimensions, we can define a custom image size specifically for post thumbnails. The add_action() function is used to hook the wpsnippets_add_custom_image_size() function to the after_setup_theme action, ensuring that the custom image size is added when the theme is set up.
Example #3: Adding Multiple Custom Image Sizes
This use case demonstrates how to add multiple custom image sizes in WordPress. The code example below adds two custom image sizes: “custom-size-one” with a width of 400 pixels and a height of 200 pixels, and “custom-size-two” with a width of 300 pixels and a height of 300 pixels.
function wpsnippets_add_custom_image_sizes() {
add_image_size( 'custom-size-one', 400, 200, true );
add_image_size( 'custom-size-two', 300, 300, true );
}
add_action( 'after_setup_theme', 'wpsnippets_add_custom_image_sizes' );
Explanation: In this example, we use the add_image_size() function multiple times to register multiple custom image sizes. Each call to the function specifies a unique name for the image size, followed by the width and height dimensions. The fourth parameter, true, indicates that the image should be cropped to fit the specified dimensions. By adding multiple calls to the add_image_size() function, we can define multiple custom image sizes. The add_action() function is used to hook the wpsnippets_add_custom_image_sizes() function to the after_setup_theme action, ensuring that the custom image sizes are added when the theme is set up.