How to Setup CloudFlare Free HTTPS for WordPress
Guides

How to Setup CloudFlare Free HTTPS for WordPress

Having HTTPS on your website is not only a more secure way to serve your website, but also an official ranking signal on Google. However there are several things to consider. If you know about the pros and cons with HTTPS for SEO and have decided to secure your site, this post is for you.

CloudFlare is a Content Delivery Network (CDN) service provider, and it offers not only a free plan but also premium plans. By signing up to CloudFlare, your website performance can increase by 60% handling tons of traffic. It can also shield you from a DDOS attack. You don’t have to pay anything to use the flexible SSL certificate from CloudFlare to put your site on HTTPS.

Setting up CloudFlare

To setup SSL to your website you must first fully setup CloudFlare to your website. Here’s how to go about it.

CloudFlare

  • First off, sign up at CloudFlare, Login and then click add site – add your WordPress site here. After CloudFlare is done scanning your site, click the continue setup button.
  • CloudFlare will then display your DNS records. If you have no knowledge of DNS records, do not touch a thing. Just click Continue.
  • Select Free Website plan then click continue.
  • At this point, CloudFlare will notify you that they cannot detect the registrar of your WordPress site. You ought to configure DNS settings.
  • Go to your domain provider and log in your account details then change nameservers by deleting the existing one and replacing it with CloudFlare nameservers.
  • You can then recheck DNS configuration on CloudFlare, though unnecessary –CloudFlare is set to automatically check this.
  • Wait a couple of minutes to a maximum of a day for your CDN service to be activated.

HTTPS and SSL Settings Offered

CloudFlare offers three SSL settings: Flexible, Full and Full (Strict).

Flexible SSL: It only encrypts the connection between your website visitors and CloudFlare. Not to your server. But no need to install SSL certificate on your server and visitors will see SSL lock on the browser.

Full SSL: Encrypts between your website visitors and CloudFlare. It also encrypts from CloudFlare to your server. To activate this Full SSL feature, you must have an SSL certificate on your server and CloudFlare will accept any SSL certificate including self-signed SSL. Visitors will see SSL lock on their browsers.

Full SSL (Strict): Similar to Full SSL feature. But you need a valid SSL certificate signed by a trusted certificate authority provider. Your visitors will see SSL lock on their browser.

Setting up free HTTPS with Flexible SSL

In this article, I will show you how to setup CloudFlare Flexible SSL for your WordPress website.

cloudflare flexible ssl

  • Go to the Crypto tab in CloudFlare and select Flexible for SSL.
  • CloudFlare might take a moment to set up your SSL certificate. We leave CloudFlare to it and go to our WordPress site.

https wordpress plugins

  • Go to plugins and get: CloudFlare Flexible SSL and WordPress HTTPS.
  • Go to WordPress HTTPS plugin and select proxy: Yes.

wp https plugin proxy yes

  • Go back to CloudFlare. If the certificate is done, proceed.
  • Go to the Page Rules tab.
  • Click Create Page Rule.

CloudFlare Page Rule

  • Insert your domain name.
  • Click Add a Setting and select Always Use HTTPS.
  • Save and Deploy. It should now look like the image below.

Always serve HTTPS page rule

  • Go back to WordPress.
  • Go to Settings/General.
  • Change your Site Address to https. DON’T CHANGE WORDPRESS ADDRESS.

WordPress URL

Thats it! Your site should be working with HTTPS now. However more than often I run in to a few errors here.

Troubleshooting WordPress HTTPS with CloudFlare

Sometimes your WordPress theme use special functions to serve specific files. That might include setting the URL path for the files. To have a working SSL site with the HTTPS green padlock means that all your folders and files, images and links needs to be served on HTTPS.

If you get an error message like this site is unsecured when trying to visit your site just choose to continue anyways.

Most likely you still serve content on HTTP.

Easiest way to find out if you still serve content on HTTP is to open Firebug and search for “http:”. I have found that things if you are using Visual Composer, images often needs to be changed to HTTPS manually.

Another common issue is that the logo still sits on HTTP. Just go to your theme options and change the path to HTTPS and it should work.

If you still get error messages it could be old plugins or theme files that need manual editing.

Please let me know if this guide was of any help to you or if you encountered any other problems. Good luck with your secure HTTPS site!

Leave a comment

Your email address will not be published. Required fields are marked *