I'm trying to eliminate "mixed content" on my website and have done so with every area of the site except for one.

Any image uploaded via the Theme Customizer is not protocol relative nor https, all images uploaded via the customizer come up "http://".

The Customizer uses the Media Gallery uploader but doesn't seem to act in the same manner. If I upload an image to the media gallery (no customizer), place it into a page, WP knows whether or not to switch between http and https, although, when the same is attempted via the theme customizer function:

$wp_customize->add_setting('slide_img_upload_one');
$wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'slide_img_upload_one', array(
    'label'    => __('Upload first image:', 'example_theme'),
    'section' => 'carousel_slide_section',
    'settings' => 'slide_img_upload_one',
    'description' => 'Upload your first slider image here.'
)));

I can not get the WP_Customize_Image_Control(); to output either "https" or a (best case scenario) protocol relative // url to the image for SSL compliance.

Some things to note. I'm not going to force SSL on my website so in Settings -> General; I'm not changing the url away from the http protocol.

I am also not looking for a way to use .htaccess to force this action.

Bottom line, there MUST be a way for images uploaded via the theme customizer to be protocol relative, I need some help figuring this one out though. I am currently running WP 4.6 (yes I know I'm a little behind).

Hopefully someone else has encountered this as hours of R&D have proved useless in trying to address something as specific as WordPress theme customizer func's.

Thanks in advance for any help, ideas, brainstorming... all ideas are welcome!

I am calling in the customizer function on the page using:

<a href="<?php echo esc_url(get_theme_mod('slide_one_link')); ?>"><img src="<?php echo esc_url( get_theme_mod( 'slide_img_upload_one' ) ); ?>" alt="<?php echo get_theme_mod( 'slide_title_1' ); ?>" /></a>

FYI: I have tried the solution here to no avail: Failed Attempt

  • 1
    how are you retrieving the customizer option with get_theme_mod? – David Lee Feb 17 '17 at 16:28
  • <a href="<?php echo esc_url(get_theme_mod('slide_one_link')); ?>"> <img src="<?php echo esc_url(get_theme_mod('slide_img_upload_one')); ?>" alt="<?php echo get_theme_mod('slide_title_1'); ?>" /> </a> – ben.kaminski Feb 17 '17 at 16:49
up vote 2 down vote accepted

I think the simpler solution would be to create your own function:

function get_theme_mod_img($mod_name){
     return str_replace(array('http:', 'https:'), '', get_theme_mod($mod_name));
}

then just use it:

<a href="<?php echo esc_url(get_theme_mod('slide_one_link')); ?>"><img src="<?php echo esc_url( get_theme_mod_img( 'slide_img_upload_one' ) ); ?>" alt="<?php echo get_theme_mod( 'slide_title_1' ); ?>" /></a>

there is another solution that involve filters as you can see here and here filters are applied like this:

return apply_filters( "theme_mod_{$name}", $mods[$name] );

$mods[ $name ] = apply_filters( "pre_set_theme_mod_{$name}", $value, $old_value );

but you would have to add a filter for each image setting you have:

add_filter('theme_mod_my-setting-image-name', 'function_that_strips_protocol');

this untested, i think it will also involve customizer preview logic.

  • David Lee: the first solution worked exactly as I had expected/wanted. Thank you for the simple yet very effective method. Very grateful for this!!! – ben.kaminski Feb 17 '17 at 17:41

I needed a little bit of extra checking.

/**
 *
 * @param Checks for ssl returns https if needed
 * @param int $p
 * @return filter
 */
function get_theme_mod_ssl($mod_name){
    if (is_ssl()) {
      return str_replace(array('http:', 'https:'), '', get_theme_mod($mod_name));
    }else{
      return get_theme_mod($mod_name);
    }
}

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.