How To Add Options To The WordPress Customizer

Inserting the custom options in the Theme Customizer is an advantage for the themes. Themes will become not dependent on plugins.

Here are the files I have in my theme that I’ll be referencing:

functions.php
inc/customizer.php

Please copy the below code and paste it into your child theme’s functions.php file.

/**
* Customizer additions.
*/
require get_template_directory() . '/inc/customizer.php';

WordPress includes a Site Identity panel section with a site title/tagline section in the Customizer. This is where the logo field will be added, using the customize_register hook.

Please copy the below code and paste it into your child theme’s customizer.php file.

/**
* Create Logo Setting and Upload Control
*/
add_action('customize_register', 'your_theme_new_customizer_settings');
function your_theme_new_customizer_settings($wp_customize) {
  
  $wp_customize->add_setting('your_theme_logo');
  
  $wp_customize->add_control( new WP_Customize_Image_Control
    ( $wp_customize, 'your_theme_logo',
      array(
        'label' => 'Upload Custom Logo',
        'section' => 'title_tagline',
        'settings' => 'your_theme_logo',
      ) 
    ) 
  );
}

The fields will now appear in the Theme Customizer for the theme, but also need to include the logo in the template files.

Please copy the below code and paste it into your child theme file where you want to display that custom logo.

// check to see if the logo exists and add it to the page
if ( get_theme_mod( 'your_theme_logo' ) ) : ?>
  <img src="<?php echo get_theme_mod( 'your_theme_logo' ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" >
<?php 
// add a fallback if the logo doesn't exist
else : ?>
  <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<?php endif; ?>

Well done! The logo will now appear on the front side.

For the output, Please check the below video.