How to enable HTTPS across your WordPress site

Be sure to begin by enabling HTTPS on your domain with this guide.

If, after completing those steps, you are not seeing the green lock / green bar when visiting your WordPress site, then there may be additional resources that are explicitly linking using http:// in their URL. This creates mixed content warnings in the browser.

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). With WordPress there are many files that your theme loads for you, such as jQuery dependencies or stylesheets.

When you changed the Site Address in step 2 above, it should have changed the URL to https throughout your site, however some themes and plugins ignore that setting (and instead hard-code http URLs, when they should not) or will hard code non-https URLs to external resources like Google Fonts.

Below are three methods of enabling secure resource URLs. If there are too many resources across too many pages to fix, then the automatic method is definitely simplest, however if it’s just a header and footer image (or something similar) then we recommend the manual option.

How to determine what’s not loading securely

The simplest way to determine what’s loading via http and not https is using your browser console — it will tell you exactly what resources are not loading with mixed content warnings. We’ve got a great guide to finding your browser console and interpreting its warnings and errors.

Alternatively you could open your website in the browser of your choice and use the browser’s view source option. Then search the page for ‘http://’ and see what comes up. This is a sub-optimial method because http resources that exist in linked files, like CSS files, will not show up. It’s best to use the browser console as described in the article linked above.

Switch to HTTPS via Database Find/Replace

This is the optimal method, as it means you’re setting the URLs permanently to their correct values.

Click here to learn how to complete the find and replace solution.

Switch to HTTPS by live rewriting HTTP with HTTPS

This is the simplest way to fix this as you don’t have to change anything in the database. This method uses a plugin that will automatically detect http:// URLs on every request and dynamically change them to https:// automatically while the page is generated. Here’s a couple plugins that do this:

1. SSL Insecure Content Fixer
2. Really Simple SSL

Install and Activate the plugin. Head to settings and progressively increase the ‘level’ of  setting until you’ve got one that works. Each level handles more intensive methods of ensuring SSL is enabled. Note that using the lowest level that ensures you get a green lock in the address bar is best for performance (don’t simply max out the setting on all sites as it will mean slower page generation times when you might have been able to use a lower setting to get the same result).

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.

Switch to HTTPS the old fashioned way…

You could alternatively manually look through your theme settings, page builder settings, and WordPress settings for any images being loaded (like your logo, or background images) and manually adjust their URLs by swapping http for https. This is not recommended as the first option above should take care of all of these instances for you.