Custom Image section in Customizer

So I did some research on the matter and I found a solution. Basically WordPress has this cool feature where you can call something called get_theme_mod so what I essentially did was add get_theme_mod inside my <img> src.

So this is what I changed my <img> tag to after finding out about get_theme_mod:

<img src="https://wordpress.stackexchange.com/questions/215701/<?php echo esc_url( get_theme_mod("customizer-option-name' ) ); ?>" alt="Product 1">

Basically what this did was it fetched the $wp_customize->add_setting('customizer-setting-name') and then outputted the content. Although I have found no way yet to put an default-image within the customizer but when I do I will update this post.

This is what my customizer.php file looks like now:

function themeName_customize_register( $wp_customize ) {

    // Add Settings
    $wp_customize->add_setting('customizer_setting_one', array(
        'transport'         => 'refresh',
        'height'         => 325,
    ));
    $wp_customize->add_setting('customizer_setting_two', array(
        'transport'         => 'refresh',
        'height'         => 325,
    ));

    // Add Section
    $wp_customize->add_section('slideshow', array(
        'title'             => __('Slider Images', 'name-theme'), 
        'priority'          => 70,
    ));    

    // Add Controls
    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'customizer_setting_one_control', array(
        'label'             => __('Slider Image #1', 'name-theme'),
        'section'           => 'slideshow',
        'settings'          => 'customizer_setting_one',    
    )));
    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'customizer_setting_two_control', array(
        'label'             => __('Slider Image #2', 'name-theme'),
        'section'           => 'slideshow',
        'settings'          => 'customizer_setting_two',
    )));    
}
add_action('customize_register', 'themeName_customize_register');

Leave a Comment