How to Add Image Upload Option to WordPress Theme Customizer

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.

Add Image Uploader WordPress Customizer

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'); ?>" />