Customizer Functions

function zalbi_customize_register( $wp_customize )

function zalbi_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';

    if ( isset( $wp_customize->selective_refresh ) ) {
        $wp_customize->selective_refresh->add_partial(
            'blogname',
            array(
                'selector'        => '.site-title a',
                'render_callback' => 'zalbi_customize_partial_blogname',
            )
        );
        $wp_customize->selective_refresh->add_partial(
            'blogdescription',
            array(
                'selector'        => '.site-description',
                'render_callback' => 'zalbi_customize_partial_blogdescription',
            )
        );
    }
}
add_action( 'customize_register', 'zalbi_customize_register' );

function zalbi_customize_partial_blogname()

function zalbi_customize_partial_blogname() {
    bloginfo( 'name' );
}

<!-- header.php -->
<div class="site-branding">
    <?php if ( is_front_page() && is_home() ) : ?>
        <h1 class="site-title">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
                <?php bloginfo( 'name' ); ?>
            </a>
        </h1>
    <?php else : ?>
        <p class="site-title">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
                <?php bloginfo( 'name' ); ?>
            </a>
        </p>
    <?php endif; ?>
</div>

function zalbi_customize_partial_blogdescription()

function zalbi_customize_partial_blogdescription() {
    bloginfo( 'description' );
}

<!-- header.php -->
<div class="site-branding">
    <p class="site-title">
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
            <?php bloginfo( 'name' ); ?>
        </a>
    </p>
    
    <?php
    $description = get_bloginfo( 'description', 'display' );
    if ( $description || is_customize_preview() ) :
        ?>
        <p class="site-description"><?php echo $description; ?></p>
    <?php endif; ?>
</div>

function zalbi_customize_preview_js()

function zalbi_customize_preview_js() {
    wp_enqueue_script( 
        'zalbi-customizer', 
        get_template_directory_uri() . '/js/customizer.js', 
        array( 'customize-preview' ), 
        _S_VERSION, 
        true 
    );
}
add_action( 'customize_preview_init', 'zalbi_customize_preview_js' );

/**
 * File customizer.js.
 *
 * Theme Customizer enhancements for a better user experience.
 */

( function( $ ) {
    // Site title
    wp.customize( 'blogname', function( value ) {
        value.bind( function( newval ) {
            $( '.site-title a' ).text( newval );
        } );
    } );

    // Site description
    wp.customize( 'blogdescription', function( value ) {
        value.bind( function( newval ) {
            $( '.site-description' ).text( newval );
        } );
    } );

    // Header text color
    wp.customize( 'header_textcolor', function( value ) {
        value.bind( function( newval ) {
            if ( 'blank' === newval ) {
                $( '.site-title, .site-description' ).css( {
                    'clip': 'rect(1px, 1px, 1px, 1px)',
                    'position': 'absolute'
                } );
            } else {
                $( '.site-title, .site-description' ).css( {
                    'clip': 'auto',
                    'position': 'relative'
                } );
                $( '.site-title a, .site-description' ).css( {
                    'color': newval
                } );
            }
        } );
    } );
} )( jQuery );

// In functions.php or inc/customizer.php

function zalbi_custom_settings( $wp_customize ) {
    // Add section
    $wp_customize->add_section( 'zalbi_colors', array(
        'title'    => __( 'Theme Colors', 'zalbi' ),
        'priority' => 30,
    ));
    
    // Add setting
    $wp_customize->add_setting( 'zalbi_accent_color', array(
        'default'           => '#FF6B6B',
        'transport'         => 'postMessage',
        'sanitize_callback' => 'sanitize_hex_color',
    ));
    
    // Add control
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'zalbi_accent_color', array(
        'label'    => __( 'Accent Color', 'zalbi' ),
        'section'  => 'zalbi_colors',
    )));
    
    // Add selective refresh
    if ( isset( $wp_customize->selective_refresh ) ) {
        $wp_customize->selective_refresh->add_partial( 'zalbi_accent_color', array(
            'selector'            => '.button, .accent',
            'container_inclusive' => false,
            'render_callback'     => function() {
                return get_theme_mod( 'zalbi_accent_color', '#FF6B6B' );
            },
        ));
    }
}
add_action( 'customize_register', 'zalbi_custom_settings' );

// In js/customizer.js

// Accent color
wp.customize( 'zalbi_accent_color', function( value ) {
    value.bind( function( newval ) {
        $( '.button, .accent' ).css( 'background-color', newval );
    } );
} );

// Get Customizer value in template
$accent_color = get_theme_mod( 'zalbi_accent_color', '#FF6B6B' );

// Output inline styles
?>
<style>
    .button,
    .accent {
        background-color: <?php echo esc_attr( $accent_color ); ?>;
    }
</style>

// In js/customizer.js, add console logging
wp.customize( 'setting_name', function( value ) {
    value.bind( function( newval ) {
        console.log( 'Setting changed to:', newval );
        $( '.selector' ).text( newval );
    } );
} );

// Proper sanitization is required
$wp_customize->add_setting( 'my_setting', array(
    'sanitize_callback' => 'sanitize_text_field', // Must be valid
));

// Common sanitization callbacks:
// - sanitize_text_field
// - sanitize_email
// - sanitize_hex_color
// - esc_url_raw
// - absint
// - wp_kses_post