Wordpress Theme Customizer

Question

I am very new to php and could really use some help lol.

I have just discovered theme customizer for Wordpress and I am trying to implement it into a new theme I am creating.

I added a background image option using this:-

// Upload Custom Background

$wp_customize->add_setting( 'simplistic_body_bg' );

$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'simplistic_body_bg', array(
'label'    => __( 'Upload a custom background image', 'simplistic' ),
'default'  => 'img/bright_squares.png',
'section'  => 'simplistic_background',
'settings' => 'simplistic_body_bg',
) ) );

and then used this in the header.php

    <style>
        body { color:  <?php echo $simplistic_body_color; ?>; background-image:url(<?php echo esc_url( get_theme_mod( 'simplistic_body_bg' ) ); ?>);}
    </style>

It does work, however the default fallback image doesn't work as the empty background-image:url( ) is still present.

I tried adding 'before' and 'after' to the customizer settings but this did not work. Can anyone help me?

I basically need the fallback bg image option to work.

Thanks so much :-)

Following on...

I have tried the suggested edits but they don't seem to be outputting the default data at all. The only thing that does work is this:

<?php
      $simplistic_body_color = get_option('simplistic_body_color');
      $simplistic_link_color = get_option('simplistic_link_color');
      $simplistic_hover_color = get_option('simplistic_hover_color');
      $simplistic_icon_color = get_option('simplistic_icon_color');
      $simplistic_footer_color = get_option('simplistic_footer_color');
      $simplistic_tag_color = get_option('simplistic_tag_color');
      $simplistic_widget_header_color = get_option('simplistic_widget_header_color');
    ?>
    <style>
        body { color:  <?php echo $simplistic_body_color; ?>;}
        a { color:  <?php echo $simplistic_link_color; ?>; }
        a:hover { color:  <?php echo $simplistic_hover_color; ?>; }
        .fa { color:  <?php echo $simplistic_icon_color; ?>; }
        .footer-wrapper { background-color:  <?php echo $simplistic_footer_color; ?>; }
        .tagcloud a { background-color:  <?php echo $simplistic_tag_color; ?>; }
        h3.widget-title { background-color:  <?php echo $simplistic_widget_header_color; ?>; }
    </style>

    <?php if ( get_theme_mod( 'simplistic_body_bg' ) ) : ?>

    <style>
        body { background-image:url(<?php echo esc_url( get_theme_mod( 'simplistic_body_bg' ) ); ?>);}
    </style>

    <?php else : ?>

    <style>
        body { background-image: url(<?php bloginfo('template_url'); ?>/img/bright_squares.png);}
    </style> 

   <?php endif; ?>

But it doesn't feel very clean. I am not sure how to put 'if else' into just one style bracket.

Answer 1

As user3734309 you're missing the second parameter of add_setting:

$wp_customize->add_setting( 'simplistic_body_bg', array(
    'default'  => 'img/bright_squares.png'
));

$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'simplistic_body_bg', array(
'label'    => __( 'Upload a custom background image', 'simplistic' ),
'section'  => 'simplistic_background',
'settings' => 'simplistic_body_bg',
) ) );

Not sure that you have a default value in add_control.

Update: Here's an example I have in my theme and that's working for a color:

$wp_customize->add_setting('wp27331869_navbar_background', array(
    'default' => '#ffffff',
    'transport' => 'postMessage'
));
$wp_customize->add_control(
    new Pluto_Customize_Alpha_Color_Control(
        $wp_customize,
        'wp27331869_navbar_background',
        array(
            'label'      => 'Header background',
            'section'    => 'nav', 
            'settings'   => 'wp27331869_navbar_background',
            'priority'   => 15
        )
    )
);

and on the front-end:

echo 'background:' . get_theme_mod('wp27331869_navbar_background', '#ffffff');

Maybe you could try that and have it working and adapt it for your need then.