Moving WordPress site to HTTPS

June 24, 2016

You have this site which was working fine on http://example.com and next, you moved it to https://example.com and the UI is all messed up. And you have to fix it. How do you do that?

Problem:
First, the reason behind it. When you moved it to https, there are few CSS/JS files that are still coming from the URL that is http://example.com and hence browser is blocking them. You can not have anything coming from HTTP on an HTTPS site without asking user.

Solution:
In order to fix it, follow these steps:

CDN/CSS URL paths have hardcoded HTTP
Check your theme files. If you are using CDN or even your site URLs to include JS/CSS, you would have to change them to HTTP/HTTPS depending upon what is the current protocol. Here is a simple PHP code snippet that would tell you if you are on HTTP or HTTPS.
<?php
$protocolPrefix = “http://”;
if (!empty($_SERVER[‘HTTPS’]) && $_SERVER[‘HTTPS’] !== ‘off’
|| $_SERVER[‘SERVER_PORT’] == 443) {
$secure_connection = true;
$protocolPrefix = “https://”;
}
?>

Next, wherever you are using HTTP blindly, change it to use protocolPrefix instead. For example, CSS include should look like:

Theme JS/CSS files
If you are including JS files from the theme itself, use the syntax below as get_template_directory_uri() function takes care of switching between HTTP or HTTPS.
<script src=”<?php echo get_template_directory_uri(); ?>/js/main.js” type=”text/javascript”></script>

Plugin code
Almost all the plugins include their own JS/CSS files. Most of the time they work fine but those plugins are written by developers like you and me. There might be some oversight in their JS/CSS inclusions too. The most common one is this call:
get_options(‘site_url’)

The above call does NOT take care of switching between HTTP and HTTPs. Replace this line with:
site_url();

Other places
The above steps should fix the UI but user might still get a warning about HTTP content being served over HTTPS. Make sure that you check all the img srcs tags and change them with the proper protocol.