Fixing Mixed Content to load over SSL using HTTPS and not HTTP
Many sites have older themes, plugins, or custom code that have either hard-coded non-secure "http://" URLs into the database or into the code itself. The ideal solution is fixed the hard-coded content directly. However, since the code could be in the database via settings pages and content pages, or in the files of code itself (PHP, Javascript, or CSS), it may be a time-consuming process for a few websites. In those instances, a broader, blanket-type solution might be quicker and would involve using Cloudflare or a WordPress plugin to handle all URLs loaded on the fly, switching them from http:// to https:// for the visitor.
Here's a reasonable process to follow when fixing mixed content on a site:
- Use your browser's developer tools to see what content is not loading over HTTPS
- If it's just a few images in the header/footer/content then try to fix those manually by editing the content to use a relative URL instead of an absolute URL:
For example: If the URL for the image was: http://website.com/logo.png, change it to just "/logo.png" - If there is a lot of content on each page not loading over HTTPS, and/or you can't edit the content easily, try turning on (or verifying it's on) the Cloudflare setting for "Automatic HTTPS Rewrites" (this can be found in the Cloudflare WordPress plugin settings within a site or on the Cloudflare website in the SSL settings for that website)
- If the above doesn't solve the issue or the website isn't on Cloudflare, as a last resort we can use the SSL Insecure Content Fixer plugin for WordPress. This plugin tends to work the best and is the quickest way to a solution, but please keep in mind that it doesn't fix the underlying insecure content issues and only puts a band-aid on the content as it loads so that the visitor has everything loaded securely. So that means slightly more bloat for the website which we try to avoid but nothing outrageous and definitely better than having mixed content.