Cloudflare Stock Image

in Tutorials

Add HTTPS to your WordPress Site with Cloudflare’s Free SSL

This tutorial is only for sites who do not own an SSL certificate in their web host and already use or planning to use Cloudflare as their CDN service.

What’s a CDN?

If you don’t know what a CDN or Content Delivery Network is, it is a service that acts like a bridge between the browser and the web hosting server. Which means instead of your browser communicating directly to the web host when opening a site, your browser communicates to the CDN instead and the CDN is the one who talks to the web host to retrieve and cache the site files to show to you.

The great thing about Cloudflare, other than it’s security and it’s Always Online feature, is that it also offers a free shared SSL certificate. As you know these certificates cost money so its a nice bonus to their service.

To be clear, the SSL certificate is only installed on Cloudflare, not on your web host. When Cloudflare shows your site to your visitors, they will see https:// on the address bar. But under the table, Cloudflare still talks to your web hosting provider in http. So technically it’s just partial SSL.

You can see it here in this very awesome illustration that I made:

Cloudflare CDN Diagram
Cloudflare CDN Diagram

I will now teach you how to properly integrate it with your http site so that it shows https. No database changes needed!

Configuring Cloudflare’s Free SSL

1. Make sure the SSL certificate is properly installed in your site.

  • Login to your Cloudflare account.
  • Click your domain name.
  • Go to Crypto and check the status if it shows “Active Certificate”. Make sure the dropdown is set to Flexible.
Cloudflare Crypto
Cloudflare Crypto

2. Install and activate the Cloudflare Flexible SSL plugin. This fixes possible redirect loops and other errors.

3. Open your site in https:// and see if there are any errors. If you see a green padlock, then everything’s fine. But if it’s a grey exclamation point, then the problem is probably caused by mixed content or static image files where they’re being delivered as HTTP.

Address bar - HTTPS vs. HTTP
Address bar – HTTPS vs. HTTP

4. Open the Developer tools in Chrome by pressing Ctrl+Shift+I. Then go to the Console tab.

5. Check for Mixed Content warnings. A filepath should be listed in each warning. Use that as reference and go to your WordPress admin to update those that are hard-encoded in posts, pages, or the theme’s stylesheet. Instead of writing…, change it to //…. This ensures flexibility and that it uses the protocol of which the site is currently viewed on.

6. If you’re done editing and still generating errors, then the remaining filepaths are probably dynamically generated by WordPress to which you don’t have control over. In that case, proceed to the next step below.

7. Install and activate the SSL Insecure Content Fixer plugin. This fixes the Mixed Content errors for dynamic filepaths on your site.

8. We’re almost done! The last thing we need to do is to force Cloudflare to show the site in https:// always.

  • Go back to Cloudflare and click on Page Rules.
  • Click the Create Page Rule button.
  • A popup will show and enter the details like in the screenshot:
Cloudflare Page Rules
Cloudflare Page Rules
  • Replace to your domain name and maintain the asterisks. For example: http://**
  • Click Save and Deploy.

9. That’s it! Go back to your site and try accessing it via http:// and it should redirect to https://. If ever you want to revert back to http, just delete or turn off the Page Rule you created and deactivate the plugins in WordPress.

IMPORTANT! Do not update the WordPress Address (URL) and the Site Address (URL) under General Settings in WordPress admin. This will break your site! Leave it as http.

Write a Comment