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'); ?>" />
Share it to the Community!

You May Also Like These wordpress customizer Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *