Theme Customzer was announced in 2012 in WordPress 3.4 version. It gives administrators the opportunity of changing theme settings and being able to see the effect those changes have on the theme, while visitors won’t see the changes until the administrator saves them. WordPress Customizer has had a rebranding in WordPress 4.0 and it was no longer made for theme options only, but for the entire WordPress options (themes, plugins…) and it was also given panels, a new way of dividing controls and sections.

2. wordpress 3.4 — theme customizer

7. function _sj_customize_register( $wp_customize ) {
$wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';
/* ... */
}
add_action( 'customize_register', '_sj_customize_register' );
/**
* Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
*/
function _sj_customize_preview_js() {
wp_enqueue_script( '_sj_customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview'
), '', true );
}
add_action( 'customize_preview_init', '_sj_customize_preview_js' );

8. $wp_customize->add_setting( 'sj_header_logo', array(
'default' => get_template_directory_uri() . '/img/blog-logo.png',
'transport' => 'postMessage'
) );

9. $wp_customize->add_panel( 'sj_images',
array(
'title' => __( 'Images', '_sj' ),
'priority' => 10
) );

10. $wp_customize->add_section( 'header', array(
'title' => __( 'Header', '_sj' ),
'panel' => 'sj_images',
'priority' => 10
) );

11. $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'sj_header_logo', array(
'label' => __( 'Upload a header logo', '_sj' ),
'section' => 'header'
) ) );

12. ( function( $ ) {
// Header logo.
wp.customize( 'sj_header_logo', function( value ) {
value.bind( function( to ) {
$( 'h1.title img' ).hide();
if ( to ) {
$( 'h1.title img:not(.default)' ).attr( 'src', to ).show();
}
else {
$( 'h1.title img.default' ).show();
}
} );
} );
} )( jQuery );

13. <?php
$sj_header_logo_default = get_template_directory_uri() . '/base_html/img/blog-logo.png';
$sj_header_logo = get_theme_mod( 'sj_header_logo' );
if ( empty( $sj_header_logo ) )
$sj_header_logo = $sj_header_logo_default;
?>
<h1 class="title">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo $sj_header_logo; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" />
<?php if ( is_customize_preview() ) : ?>
<img src="<?php echo $sj_header_logo_default; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>"
class="default" style="display: none" />
<?php endif; ?>
</a>
</h1>