How To Fix SSL/TLS Mixed Content in WordPress
You’re in a hurry, trying to finish yet another important project, your client is waiting and… you’ve set-up SSL certificate and all was peachy. And then – bam! Suddenly you realize that your visitors (which you were “simulating” with Chrome’s Incognito or Firefox’s/Edge’s Private browsing modes, btw.) see mixed-content insecure website warning.
What happened? Well, there are couple of possibilities, but the most obvious ones are not gonna cross your mind during panic attack moment:
- Did you visit WordPress’s Admin Dashboard > Settings > General page and update your website name/url to be https?
- Did you forget to update some plugin’s settings, like custom/static/default image files, stylesheets and scripts? Although, good plugins should use internal WordPress helper functions to automatically determine http/https scheme used (see above step), in some cases you need to specify default url/paths manually.
- Did you install some static HTML caching plugin? If yes, you’ve probably forgot to re-generate or clear the cache files, and this is the reason why they are still serving http (non-secure) resources in your https page.
- Finally, check you theme (and plugins) files, use Notepad++ (or similar code editing tool) to search inside files/directory and look for any hard-coded “http” keyword, and particularly pay close attention to those linking internal or external resources (e.g. css, js, jpg/jpeg, png, bmp, gif and other files) and update them to use https instead.
And that’s it! The whole reason for the mixed content warning issue in our case was caused by a caching plugin, which we completely forgot it was installed and left active during final development stage. Yeah, it happens even to best of us ;)