1

My theme contains a parallax header image. How can I change the URL of the header image so that it uses HTTPS? I want to do it manually.

Currently the URL is:

http://example.com/themes/abc/header.jpg

I want to change it to:

https://example.com/themes/abc/header.jpg

Plugins are not helping me on this specific file (they are converting others). Chrome tells me the header is being loaded by jquery.js. I have no idea how jQuery is doing this.

I believe editing functions.php can help, but how can I do it?

5
  • You can use str_replace to change http to https in a specific string. First you will need to find the code responsible for adding this image.
    – Robert hue
    Oct 24, 2015 at 5:12
  • Its a css generated by theme(bg image). Right now i solved it by overriding the theme's css.
    – Cijo
    Oct 25, 2015 at 9:12
  • Is there an another way.
    – Cijo
    Oct 25, 2015 at 9:15
  • Depends how your website is working. Why don't you post the URL of website and which image you want to change. Let us have a look.
    – Robert hue
    Oct 25, 2015 at 9:17
  • CSS of header image is added in header. How it is being added in header. Also I am not sure why are you going through all this trouble for 1 image. Your website is setup as non https website and Most of the links are also non https. So try setting up website with https link and I am sure these links will change to https automatically.
    – Robert hue
    Oct 25, 2015 at 9:45

2 Answers 2

0

Have you considered Protocol Rewriting? The code below will convert all http: and https: to // for each script, link, base, and image. Place this in your functions.php:

add_action( 'plugins_loaded', 'wpse_232287_init' );

function wpse_232287_init() { // Initiate the function
    ob_start( 'wpse_232287_remove_http' );
}

function wpse_232287_remove_http( $buffer ) {
    // Check for a Content-Type header, only apply rewriting to "text/html" or undefined
    $headers = headers_list();
    $content_type = null;

    foreach ( $headers as $header ) {
        if (strpos( strtolower( $header ), 'content-type:' ) === 0 ) {
            $pieces = explode( ':', strtolower( $header ) );
            $content_type = trim( $pieces[1] );
            break;
        }
    }

    if ( is_null( $content_type ) || substr( $content_type, 0, 9 ) === 'text/html' ) { // Replace 'href'/'src' attributes within script/link/base/img tags with '//'
        $return = preg_replace( "/(<(script|link|base|img|form)([^>]*)(href|src|action)=[\"'])https?:\\/\\//i", "$1//", $buffer );
        if ( $return ) { // On regex error, skip overwriting content
            $buffer = $return;
        }
    }
    return $buffer;
}
0

To change the URL of the header image to use HTTPS, you can use jquery to target the element that contains the header image and update its src attribute. You can add this jquery script to your themes js file or directly to your WordPress theme's footer.

WP themes already include jQuery, but if yours does not, you can enqueue it in your themes functions.php file first.

function my_theme_enqueue_scripts() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');

once jQuery is loaded, you can add a script to update the header image URL to use HTTPS. Use a functions.php file inside your theme (or child theme if exists) template add this code below.

function add_this_script_footer() { 
?>
<script>
jQuery(document).ready(function($) {
        // Target the header image element using its class or ID
        var headerImage = $('.parallax-header-image');
    
        // Check if the header image exists
        if (headerImage.length) {
            // Get the current image URL
            var imageUrl = headerImage.attr('src');
    
            // Replace 'http://' with 'https://' in the image URL
            var secureImageUrl = imageUrl.replace('http://', 'https://');
    
            // Update the header image URL to use HTTPS
            headerImage.attr('src', secureImageUrl);
        }
    });
</script>
<?php } 
add_action('wp_footer', 'add_this_script_footer');

Replace .parallax-header-image with the appropriate selector for your header image element.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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