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');