Moving WordPress site to HTTPS

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.

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.