I use the WP_Customize_Image_Control to add the image.

But, The default value is accessible in Customizer only!!! On front-end It return empty.

How to reproduce?

Copy below code snippet and paste in your themes functions.php.

Visit URL http://YOUR_SITE/wp-admin/customize.php?autofocus[section]=section-test_option to open section Test Section

add_action( 'customize_register', 'test_1234_customize_register' );
add_action( 'wp_head', 'test_1234_customizer_ouput_debug' );

function test_1234_customizer_ouput_debug() {

    // $options = get_theme_mod( 'this-is-the-test-option' );
    $options = get_option( 'this-is-the-test-option' );
    echo '<pre style="background: #fff;">Default Image URL: ';
    print_r( $options );
    echo '</pre>';
}

function test_1234_customize_register( $wp_customize ) {

    /**
     * Test Section
     */
    $wp_customize->add_section( 'section-test_option', array(
        'title' => __( 'Test Option', 'next' ),
    ) );

    /**
     * Test Option - 1
     */
    $wp_customize->add_setting( 'this-is-the-test-option', array(
        'default' => '.png',
        'type'    => 'option',  // Comment this parameter to use 'get_theme_mod'
    ) );
    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'this-is-the-test-option', array(
        'section'        => 'section-test_option',
        'label'          => __( 'Test', 'next' ),
        'settings'       => 'this-is-the-test-option',
        'library_filter' => array( 'gif', 'jpg', 'jpeg', 'png', 'ico' ),
    ) ) );
}

Output

1. In Customizer window preview

2. In Front End ( Checked in Incognito window too )

As per above example I'm able to use: get_option( 'this-is-the-test-option', '.png' ) to get default image.

But, It'll be fail if I store the options in array. E.g.

$wp_customize->add_setting( 'this-is-the-test-option[option1]', array(
...

$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'this-is-the-test-option[option1]', array(
...

In above situation the best solution is merging the default values. I found the solution suggested by @westonruter in gist.

But, Questions are:

1. Why the default value is accessible in Customizer Preview window? ( As per the above code snippet.)
2. Is default parameter for the control WP_Customize_Image_Control is useful?

I use the WP_Customize_Image_Control to add the image.

But, The default value is accessible in Customizer only!!! On front-end It return empty.

How to reproduce?

Copy below code snippet and paste in your themes functions.php.

Visit URL http://YOUR_SITE/wp-admin/customize.php?autofocus[section]=section-test_option to open section Test Section

add_action( 'customize_register', 'test_1234_customize_register' );
add_action( 'wp_head', 'test_1234_customizer_ouput_debug' );

function test_1234_customizer_ouput_debug() {

    // $options = get_theme_mod( 'this-is-the-test-option' );
    $options = get_option( 'this-is-the-test-option' );
    echo '<pre style="background: #fff;">Default Image URL: ';
    print_r( $options );
    echo '</pre>';
}

function test_1234_customize_register( $wp_customize ) {

    /**
     * Test Section
     */
    $wp_customize->add_section( 'section-test_option', array(
        'title' => __( 'Test Option', 'next' ),
    ) );

    /**
     * Test Option - 1
     */
    $wp_customize->add_setting( 'this-is-the-test-option', array(
        'default' => 'https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png',
        'type'    => 'option',  // Comment this parameter to use 'get_theme_mod'
    ) );
    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'this-is-the-test-option', array(
        'section'        => 'section-test_option',
        'label'          => __( 'Test', 'next' ),
        'settings'       => 'this-is-the-test-option',
        'library_filter' => array( 'gif', 'jpg', 'jpeg', 'png', 'ico' ),
    ) ) );
}

Output

1. In Customizer window preview

http://bsf.io/net4f

2. In Front End ( Checked in Incognito window too )

http://bsf.io/u59cm

As per above example I'm able to use: get_option( 'this-is-the-test-option', 'https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png' ) to get default image.

But, It'll be fail if I store the options in array. E.g.

$wp_customize->add_setting( 'this-is-the-test-option[option1]', array(
...

$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'this-is-the-test-option[option1]', array(
...

In above situation the best solution is merging the default values. I found the solution suggested by @westonruter in gist.

But, Questions are:

1. Why the default value is accessible in Customizer Preview window? ( As per the above code snippet.)
2. Is default parameter for the control WP_Customize_Image_Control is useful?

• customization
• images
• theme-customizer

3 Answers 3

The default value that you set on the image add_setting will only be applyed if there is a any option called 'reset to default' on the image control. This argument will not output any default value to the page.

The second argument of the function get_option( 'option_name', $default ). The $default parameter will not submit anything to the DB. It only returned if the option does not exists. e.g: when the user installed the theme, and the logo (or the option that displays anything on the page) must not be empty. But if he save the option, the option will exist on the db, even if empty. Then this default will not apply anymore. it works like a place holder.

If you want a default value, even if the option are saved and return a empty string, you can do this:

$option = get_option( 'option_name', $default )
echo ( empty( $option ) ? 'default' : $option );

The empty() function will check if the returned value are a empty string, or anything that represents a empty (boolean, integer, null, etc). You can read more here: http://php/manual/pt_BR/function.empty.php

This way, a default value will be ever applyed, if the option exists.

Note: its a best practice to use 'type' => 'theme_mod' when creating mods for themes, not 'type' => 'option'. If you omit this arg, the default will be theme_mod.

Thanks @Felipe for explanation & @westonruter for providing the solution in the gist.

Solution: Create defaults array and use it in Customizer & on Front End.

Step-1: Register theme defaults array.

if ( ! function_exists( 'my_theme_defaults' ) ) {

    function my_theme_defaults() {

        return array(
                    'option-1' => 1,
                    'option-2' => 'author',
                    'option-3' => '#3a3a3a',
                    'option-4' => 'ALL RIGHT RESERVED'
                    'option-5' => get_template_directory_uri() . '/assets/images/logo-black.png'
                );
    }
}

Setp-2: Access in Customizer & FrontEnd.

Access in Customizer

//  Get theme default values
$theme_defaults = my_theme_defaults();

...
$wp_customize->add_setting( 'my-theme-options[option-1]', array(
    'default' => $theme_defaults['option-1'],
    ...
) );
...
$wp_customize->add_setting( 'my-theme-options[option-2]', array(
    'default' => $theme_defaults['option-2'],
    ...
) );
...

Access on Front End

//  Get theme stored values
// Note: I use the `'type' => 'option',` for all the options. So, Getting stored values of option 'my-theme-options' using `get_option()`. You can use `get_theme_mod()` if you use it for `add_settings()`.
$theme_stored   = get_option( 'my-theme-options' );

//  Get theme default values
$theme_defaults = my_theme_defaults();

//  Merge both
$theme_options = wp_parse_args( $theme_stored, $theme_defaults );

//  Access option value    
//  e.g.
echo $theme_options['option-1'];
echo $theme_options['option-2'];
echo $theme_options['option-3'];

NOTE: Don't forget to use filters where ever possible to extend in future. Also, Add text translations.

Very easy solution, try it. Hope It will help you.

Simply use this code in your front-end.

From your own directory-

<img src="<?php echo esc_url(get_theme_mod('this-is-the-test-option',''.get_template_directory_uri().'/images/logo.png')); ?>" alt="Google"/>

From online link-

<img src="<?php echo esc_url(get_theme_mod('this-is-the-test-option','https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png')); ?>" alt="Google"/>