How to enable HTTPS across your WordPress site

Enabling HTTPS / SSL across your entire website has become considerably easier and cheaper thanks to awesome new technologies like Let’s Encrypt. No longer do you need to purchase an SSL certificate and spend time waiting for it to be signed, delivered and installed. Within Plesk you can simply click once to have that taken care of entirely for you.

But there’s still one more step beyond obtaining and installing a certificate: ensuring WordPress knows to use SSL.

Tell WordPress

Start by going to Settings > General in the WordPress admin and change both the WordPress Address and Site Address to ensure they start with https://.

That ensures pages are loaded via https, but it doesn’t ensure that all resources (images, CSS, etc) are loaded securely. This means browsers may report that some resources aren’t loading securely.

Secure Resources (performance)

With a purely HTML based website, you’d need to check every single file and adjust each resource to ensure it’s being loaded via HTTPS (e.g.: https://websavers.ca/image.png) or a relative URL (e.g.: /image.png), or even a protocol agnostic URL (e.g.: //websavers.ca/image.png). But with WordPress there are many files that your theme loads for you, such as jQuery dependencies or stylesheets, and occasionally the theme does a bad job of ensuring its resources are loaded using your specified protocol.

To fix this, I’d suggest first trying to manually adjust any logos, images, etc. which are not loading via https. Although it’ll take some time, it’ll mean better performance for your website and full security. However, it’s understandable that in many cases this process can take too long and in other cases the theme files themselves are hard coded to not use https. In these cases, use the below fix.

Secure Resources (simple)

The simplest way to load them securely without having to make changes to the core theme files, is to use the SSL Insecure Content Fixer plugin.

Install and Activate it, then head to settings and progressively increase its setting until you’ve got one that works. Each level handles more and more methods of ensuring SSL is enabled. Note that using the lowest level that works for you is best for performance.

You’ll know it’s working fully when you see the lock icon in your address bar. Don’t forget to disable caching while testing this, or at least clear your cache after each change, then refresh your website in the browser.

Troubleshooting

If this doesn’t seem to be working, the best way to find out what files seem to be causing problems is to use your browser’s web inspector tool. In some cases this tool will be available immediately, in others (like Safari) you need to enable Developer mode.

You can access the web inspector by right clicking on the web page, then choosing “Inspect” or “Inspect Element”. Once you have access to the web inspector, check its console (typically a tab of the web inspector) and look for errors and/or warnings like this:

[Warning] The page at https://your_url/ was allowed to display insecure content from http://your_url/wp-content/uploads/2015/12/web-design.jpg. (your_url, line 857)

These indicate which files are not being loaded via HTTPS. You can use this info to find where they’re being loaded in the back-end and change to them relative or protocol agnostic URLs (as indicated in the examples found in the second paragraph above).

Fix up each resource which shows as a warning in the console and you’ll be all set!

Jordan is a computer, security, and network systems expert and a lover of all things web and tech. Jordan consults with project management for software companies. Jordan is a founder and managing partner at Websavers Inc.

Leave a Comment