Wordpress Customize Image Control Not Working

Question

I am currently creating a Wordpress theme and I have run into a snag. I'm using the theme customize page to upload a main logo and a mobile logo. Those logo's should then be used on the page. I got it to work for twenty minutes but them it stopped working.

Here is my customize register function in function.php:

function wpalpha_customize_register( $wp_customize ) {

  $wp_customize->add_section( 'wpalpha_logo_section' , array(
    'title'                 =>  __('Logos', 'wpalpha'),
    'description'           =>  __('Upload logos to replace the default site logos.'),
    'panel'                 =>  'design_settings',
    'priority'              =>  10,
    'capability'            =>  'edit_theme_options',
    'theme_supports'        =>  '',
  ) );

  $wp_customize->add_setting('wpalpha_desktop_logo', array(
    'type'                  =>  'theme_mod',
    'capability'            =>  'edit_theme_options',
    'theme_supports'        =>  '',
    'default'               =>  get_template_directory_uri().'/img/header/shield_text.png',
    'sanitize_callback'     =>  '',
    'sanitize_js_callback'  =>  '',
    'transport'             =>  'refresh',
  ));
  $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'wpalpha_desktop_logo', array(
    'label'                 =>  __('Choose Logo', 'wpalpha'),
    'section'               =>  'wpalpha_logo_section',
    'settings'              =>  'wpalpha_desktop_logo',
    'context'               =>  'wpalpha-desktop-logo',
  )));

  $wp_customize->add_setting('wpalpha_mobile_logo', array(
    'type'                  =>  'theme_mod',
    'capability'            =>  'edit_theme_options',
    'theme_supports'        =>  '',
    'default'               =>  get_template_directory_uri().'/img/header/shield.png',
    'sanitize_callback'     =>  '',
    'sanitize_js_callback'  =>  '',
    'transport'             =>  'refresh',
  ));
  $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'wpalpha_mobile_logo', array(
    'label'                 =>  __('Choose Logo', 'wpalpha'),
    'section'               =>  'wpalpha_logo_section',
    'settings'              =>  'wpalpha_mobile_logo',
    'context'               =>  'wpalpha-mobile-logo',
  )));
}

add_action('customize_register', 'wpalpha_customize_register');

And here is where I'm using it in header.php:

<a class="navbar-brand" href="<?php echo home_url(); ?>">

  <?php if(get_theme_mod('wpalpha_desktop_logo') != ''): ?>
  <img class="desktop dlp_logo" src="<?php echo esc_url(get_theme_mod('wpaplpha_desktop_logo')); ?>">
  <?php endif; ?>

  <?php if(get_theme_mod('wpalpha_mobile_logo') != ''): ?>
  <img class="mobile dlp_logo" src="<?php echo esc_url(get_theme_mod('wpaplpha_mobile_logo')); ?>">
  <?php endif; ?>

</a>

This is what my code outputs as:

<img class="desktop dlp_logo" src="">
<img class="mobile dlp_logo" src="">

This image shows that the options work on the customize page but my logos no longer show up (The little box in the top left corner is supposed to be the logo): (Apparently I'm not good enough for this site to post a picture so you'll have follow this link...)

https://i.stack.imgur.com/C38O6.jpg

Please help! Thanks

Update #1:

I looks like my database is no longer being updated when I change the logos on the Wordpress backend site. Am I forgetting update options? I thought that was built into these functions.

Update #2:

<?php echo var_dump(get_theme_mod('wpalpha_desktop_logo')); ?>

This var_dump() returns 'string(82) "http://localhost:8888/wp-content/themes/adenicboy-alpha/img/header/shield_text.png"' so I'm really confused why this isn't working...

Answer 1

I've come up with a solution!

I was able to make it work by calling get_theme_mod() and storing the result in a string instead of calling it inside of the src area. I then echo the string into the src area.

<a class="navbar-brand" href="<?php echo home_url(); ?>">

  <?php if(get_theme_mod('wpalpha_desktop_logo') != ''): ?>
    <?php $wpalpha_desktop_logo = esc_url(get_theme_mod('wpalpha_desktop_logo')); ?>
    <img class="desktop dlp_logo" src="<?php echo $wpalpha_desktop_logo; ?>">
  <?php endif; ?>

  <?php if(get_theme_mod('wpalpha_mobile_logo') != ''): ?>
    <?php $wpalpha_mobile_logo = esc_url(get_theme_mod('wpalpha_mobile_logo')); ?>
    <img class="mobile dlp_logo" src="<?php echo $wpalpha_mobile_logo; ?>">
  <?php endif; ?>

</a>

I highly recommend using var_dump() on your get_theme_mod() if anyone has a similar issue.

Answer 2

The opening anchor tag is missing a "<". This could be causing issues with displaying the enclosed content. Try changing this

a class="navbar-brand" href="<?php echo home_url(); ?>">

to this

<a class="navbar-brand" href="<?php echo home_url(); ?>">