I'm trying to set a background image in the WordPress Customizer. I can upload the image and see it preview in Customizer but after I save it, its not appearing on the live site.
I have the following code in my customizer.php file:
$wp_customize->add_setting( 'section_1_background_image', array(
'default' => get_template_directory_uri() . '/images/default.jpg',
'transport' => 'postMessage',
) );
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'section_1_background_image_control', array(
'label' => __('Background Image','minisite'),
'settings' => 'section_1_background_image',
'section' => 'section_1',
'priority' => 10,
) ) );
and the corresponding code in my customizer.js file
wp.customize( 'section_1_background_image', function( value ) {
value.bind( function( newval ) {
$('#wrapper-1').css('background-image', newval );
} );
} );
This same setup works fine for background colors but I believe it has to do with "url" needing to be output in the css in front of the background-image filename, which it isn't doing.
I also tried the following with no success:
wp.customize( 'section_1_background_image', function( value ) {
value.bind( function( newval ) {
$('#wrapper-1').css('background-image', 'url("' + newval + '")' );
} );
} );
Am I missing something?
If you're referring to the option to add background images when you navigate to Appearance -> Customize in WordPress' admin I typically provide the option to customize the background through custom-background in my functions.php:
$custom_background = array(
'default-color' => '00ff00',
'default-image' => get_template_directory() . '/img/default_background.png',
'background-repeat' => 'tile',
'default-position-x' => 'center',
'background-attachment' => 'fixed',
'wp-head-callback' => '_custom_background_cb'
);
add_theme_support( 'custom-background', $custom_background );
You're adding the control wrong.
$wp_customize->add_setting( 'section_1_background_image', array(
'default' => get_template_directory_uri() . '/images/default.jpg',
'transport' => 'postMessage',
) );
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'section_1_background_image', array(
'label' => __('Background Image','minisite'),
'settings' => 'section_1_background_image',
'section' => 'section_1',
'priority' => 10,
) ) );
The name in the WP_Customize_Image_Control should be same as the setting name.
You're referencing the section_1_background_image_control, and the setting name is section_1_background_image.
EDIT
To make your image appear, you need to add in your javascript (I'm following the twenty fifteen theme here)
( function( $ ) {
var style = $( '#twentysixteen-color-scheme-css' ),
api = wp.customize;
if ( ! style.length ) {
style = $( 'head' ).append( '<style type="text/css" id="twentysixteen-color-scheme-css" />' )
.find( '#twentysixteen-color-scheme-css' );
}
api( 'section_1_background_image', function( value ) {
value.bind( function( newval ) {
var background_image = 'body{ background-image: url( ' + newval + '); }'
style.text( background_image );
} );
} );
} )( jQuery );
Where you toggle all your live changes. I added the image to the body, but you can change that to #wrapper-1
var background_image = '#wrapper-1{ background-image: url( ' + newval + '); }'
EDIT 2
This also works for me:
wp.customize( 'section_1_background_image', function( value ) {
value.bind( function( newval ) {
$('body').css('background-image', 'url("' + newval + '")' );
} );
} );
Just replace body with #wrapper-1.
Just realized, you've said that when you save the image, the wrapper doesn't have saved the image. Did you create a dynamic-css.php where you'll place all the custom css?
Usually I create a dynamic-css.php where I place $custom_css variable and place the results of the customizer in.
$section_1_background_image= get_theme_mod( 'section_1_background_image', '' );
if ( '' !== $section_1_background_image) {
$custom_css .= '#wrapper-1{background-image: url("' . esc_attr( $body_background ) . '");}';
}
Then I define the same variable in my functions.php and add it as an inline style:
$custom_css = '';
wp_add_inline_style( 'main_css', $custom_css );
Where main_css is the hook name where you call the get_stylesheet_uri(). This code must go after the main stylesheet enqueue.
As it turns out, the correct code for displaying it in the Customizer was:
wp.customize( 'section_1_background_image', function( value ) {
value.bind( function( newval ) {
$('#wrapper-1').css('background-image', 'url("' + newval + '")' );
} );
} );
However, this wasn't the problem for saving it properly on the front end. That was solved here.
