Moving WordPress site to HTTPS

tudip-logo

Tudip

24 June 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:

<link type="text/css" href=<?php echo($protocolPrefix."ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/ui-darkness/jquery-ui.css");?> rel="stylesheet">

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.

Request a quote