Moving WordPress site to HTTPS
You have this site which was working fine on http://mysite.com and next you moved it to HTTPS://mysite.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://mysite.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 whereever you are using HTTP blindly, change it to use protocolPrefix instead. For example, a 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 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.
If you are still facing any issue, please leave a comment and we can help you out.