Hello everyone,

Today I am going to illustrate on , how to cropped image on customizer.

Normally we use WP_Customize_Image_Control for selecting image on customizer section, but this doesn’t provide you the featured to cropped image on your requirement.
But WordPress provide us class called ‘WP_Customize_Cropped_Image_Control‘ which provide you the featured to crop a image.You can see full code here: https://core.trac.wordpress.org/browser/tags/4.6/src/wp-includes/customize/class-wp-customize-cropped-image-control.php#L17
Before starting the tutorial I hope you all guys know how to add section, setting and control on customizer.
Step 1: First create section:

$wp_customize->add_section( 'themeslug_section', array(
'title' => __( 'Cropped Image', 'theme-text-domain' ),
'priority' => 1,
) );

Step 2: Create setting id and control panel:

$wp_customize->add_setting( 'theme_slug_create_cropped_image', array(
'sanitize_callback' => 'absint',

) );

$wp_customize->add_control( new WP_Customize_Cropped_Image_Control( $wp_customize, 'theme_slug_create_cropped_image', array(
'label' => __('Cropped the selected Image', 'theme-text-domain'),
'section' => 'themeslug_section',
'height' => 100,
'width' => 100,
'flex_width ' => false,
'flex_height ' => false,
'priority' => 1

Note: Here we are using absint as sanitize callback, as WP_Customize_Cropped_Image_Control class store
image id on database. Sanitizing customizer is most on every customizer setting.

Step 3: Finally we need to display the selected image. For this we are using wp_get_attachment_image()
function, See here for reference: https://developer.wordpress.org/reference/functions/wp_get_attachment_image/

Let me know if you have any question or queries or any other best solution.You can ping me on adhsushil7@gmail.com


Leave a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: