Change all occurrences of "http" to "https" on a wordpress page

Question

I am in the process of implementing SSL on some of my wordpress-powered site's pages. Currently I'm getting mixed content warnings on the secured pages - my custom theme includes a lot of links and src attributes that occur on all pages. Links appear in the header, footer, the navigation (auto generated by wordpress function) and the sidebar (partially from a plugin). While I could theoretically write a custom header and footer for the secured pages, it'd be impossible to use the plugin and the navigation on the secured page.

What I've been trying to accomplish all day is to write a javascript or jQuery function that changes all occurences of "http" to "https" on pages that are served via SSL.

This problem blatantly showed me the limits of my coding capacity. Problematic is that the finally served document consists of several php files, some of which I have little control over (would have to modify plugin(s) which are (A) rather complex and (B) I'd like to update in the future). Also regular expressions are still a mystery to me.

I don't know if this is at all possible and whether triggering the change with $(document).ready or window.onload wouldn't be too late anyway, since the browser will issue the mixed content warning earlier than that.

Thanks in advance, Johannes

Answer 1

Have you looked at the protocol-agnostic relative url prefix?

E.g. if you have the following

<img src="//myimage.png" />

It will use whatever protocol the page is currently on. More info: http://paulirish.com/2010/the-protocol-relative-url/

Answer 2

I agree with the other posters who suggest that there are better ways to do what you are after. With that said, it sounds like you're in a bind, so let me offer a crack at it. (BTW, hat tip and a +1 vote to the protocol relative URL; I didn't know about that!)

Anyway, I assume what you are after is in <a> tags, but it should be easy to extrapolate this to others:

if (document.location.protocol === 'https:') {
    $('a').each(function() {
        var href = $(this).attr('href');
        if (href.indexOf('http:') > -1) {
            href = href.replace('http:', 'https:');
            $(this).attr('href', href);
        }
    });
}

With this help offered, I would encourage you to see if there's a safer / more practical way to do what you are trying to do. I will also mention that this approach will likely only work for links; modifying CSS and script references after the page loads will certainly backfire and not get you the result you want.

Notice the ":" in "document.location.protocol === 'https:'".

Answer 3

if you only want to make sure there is no mixed content when an HTTPS request is made, try adding simple code snippet to the "function.php" file of the current theme.

function _bd_force_https()
{
    if ( empty( $_SERVER['HTTPS'] ) ) return;
    ob_start();
}
add_action( 'template_redirect', '_bd_force_https', 1 );

function _bd_output_https_page()
{
    if ( empty( $_SERVER['HTTPS'] ) ) return;
    echo str_ireplace( 'http://', 'https://', ob_get_clean() );
}
add_action( 'wp_footer', '_bd_output_https_page', 99 );

PROS:

• very lean, simple to add
• does not use javascript/jquery

CONS:

• not a plugin so it will break when theme is changed
• cannot intercept HTTP requests made by javascripts from the client side

Answer 4

I think you should use a plugin like "WordPress HTTPS". There are too many edge cases that you should be aware of (like third party plugins you don't have control) and using a well stablished add-on like this one would be an interesting approach.

WordPress HTTPS is intended to be an all-in-one solution to using SSL on WordPress sites. Free support provided!