Let’s say, You want to add an image upload option in the WordPress theme customizer to add a logo, inside the Site Identity section.
WordPress Customizer Tutorial – The Complete Guide
So to that, add this code within your theme’s functions.php file or in a separate theme customizer specific file.
//=================================================================
// Add Logo Uploader to the Existing Site Title Section
//=================================================================
<?php
function diwp_theme_customizer_options($wp_customize){
$wp_customize->add_setting( 'diwp_logo', array(
'default' => get_theme_file_uri('assets/image/logo.jpg'), // Add Default Image URL
'sanitize_callback' => 'esc_url_raw'
));
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'diwp_logo_control', array(
'label' => 'Upload Logo',
'priority' => 20,
'section' => 'title_tagline',
'settings' => 'diwp_logo',
'button_labels' => array(// All These labels are optional
'select' => 'Select Logo',
'remove' => 'Remove Logo',
'change' => 'Change Logo',
)
)));
}
add_action( 'customize_register', 'diwp_theme_customizer_options' );
This will add an option to upload images in the customizer or theme options panel inside the Site identity section, as shown in the image below.
In the above code, I have used a class WP_Customize_Image_Control for image control. This image control stores the URL of the image in the database.
You can also set the default image and pass the URL in the ‘default’ => ‘your default image URL’ argument in the setting.
Display Image
To display image from this control, you can use get_theme_mod( ‘your-setting-id-for-associated-control’ ), so in my case, I will display the image like
// Display Image using customizer image control
<img src="<?php echo get_theme_mod('diwp_logo'); ?>" />
