How to Add Custom Image Sizes to the Media Insert Dialog Box in WordPress

Home » Snippets » How to Add Custom Image Sizes to the Media Insert Dialog Box in WordPress
0

Created with:

Visibility: 

public

Creator: WPTurbo Team

Customize with WPTurbo AI
X

Add Snippet To Project

New Project
Add To Existing Project

Are you tired of not being able to choose custom image sizes when inserting media into your WordPress posts? By default, WordPress only provides a limited set of image size options in the media insert dialog box. However, with a few simple tweaks, you can add your own custom image sizes to the dropdown list. In this article, we will show you how to modify the "image_size_names_choose" filter to include your desired image sizes in the media insert dialog box, giving you more flexibility and control over how your images are displayed on your website.

					// Add custom image sizes to media insert dialog box
function wpturbo_custom_image_sizes($sizes) {
    $custom_sizes = array(
        'wpturbo-small' => __('Small', 'wpturbo'),
        'wpturbo-medium' => __('Medium', 'wpturbo'),
        'wpturbo-large' => __('Large', 'wpturbo')
    );
    return array_merge($sizes, $custom_sizes);
}
add_filter('image_size_names_choose', 'wpturbo_custom_image_sizes');
				

The code snippet provided adds custom image sizes to the media insert dialog box in WordPress. This allows users to easily select and insert images with the desired dimensions when editing posts or pages.

To begin, a new function named wpturbo_custom_image_sizes is created. This function is responsible for defining the custom image sizes that will be added to the dialog box.

Inside the function, an associative array called $custom_sizes is created. Each key-value pair represents a custom image size. The key is the name of the size, starting with wpturbo-, followed by the size (e.g., small, medium, large). The value is the display name for the size, which will be shown in the dialog box.

$custom_sizes = array(
    'wpturbo-small' => __('Small', 'wpturbo'),
    'wpturbo-medium' => __('Medium', 'wpturbo'),
    'wpturbo-large' => __('Large', 'wpturbo')
);

To make the custom image sizes available in the media insert dialog box, we need to merge the new sizes with the existing sizes. The image_size_names_choose filter is used to modify the available size options displayed in the dialog box.

We do this by hooking the wpturbo_custom_image_sizes function into the image_size_names_choose filter using the add_filter function.

add_filter('image_size_names_choose', 'wpturbo_custom_image_sizes');

Once the code is added to your WordPress website, the custom image sizes defined in the wpturbo_custom_image_sizes function will be added to the media insert dialog box. Users can then select these custom sizes when inserting images into their posts or pages, allowing them to easily control the dimensions of the inserted images.

Register an account to save your snippets or go Pro to get more features.